ustyle 1.3.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (634) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +23 -0
  3. data/.rbenv-gemsets +1 -0
  4. data/.ruby-version +1 -0
  5. data/CONTRIBUTING.md +68 -0
  6. data/Gemfile +4 -0
  7. data/Gruntfile.js +189 -0
  8. data/JAVASCRIPT_STANDARDS.md +88 -0
  9. data/LICENSE.txt +13 -0
  10. data/README.md +93 -0
  11. data/Rakefile +6 -0
  12. data/bower.json +54 -0
  13. data/config/.jscsrc +76 -0
  14. data/config/autoprefixer.yml +6 -0
  15. data/config/scss-lint.yml +54 -0
  16. data/dist/ustyle-content.css +1 -0
  17. data/dist/ustyle-icons.css +1 -0
  18. data/dist/ustyle-latest.css +1 -0
  19. data/dist/ustyle.js +799 -0
  20. data/dist/ustyle.json +1 -0
  21. data/grunt/modules/dss-helper.js +117 -0
  22. data/grunt/modules/file.js +26 -0
  23. data/grunt/modules/templates.js +59 -0
  24. data/grunt/tasks/browser-sync.js +19 -0
  25. data/grunt/tasks/builder.js +72 -0
  26. data/grunt/tasks/styleguide.js +290 -0
  27. data/grunt/tasks/svg2png.js +57 -0
  28. data/lib/ustyle/deploy.rb +31 -0
  29. data/lib/ustyle/engine.rb +24 -0
  30. data/lib/ustyle/hash.rb +44 -0
  31. data/lib/ustyle/icons.rb +13 -0
  32. data/lib/ustyle/sass_functions.rb +104 -0
  33. data/lib/ustyle/sinatra.rb +34 -0
  34. data/lib/ustyle/sprockets.rb +6 -0
  35. data/lib/ustyle/utils.rb +40 -0
  36. data/lib/ustyle/version.rb +4 -0
  37. data/lib/ustyle.rb +54 -0
  38. data/package.json +74 -0
  39. data/styleguide/CNAME +1 -0
  40. data/styleguide/assets/images/bower-logo.png +0 -0
  41. data/styleguide/assets/images/cloudfront-logo.png +0 -0
  42. data/styleguide/assets/images/illustration-01.png +0 -0
  43. data/styleguide/assets/images/illustration-02.png +0 -0
  44. data/styleguide/assets/images/illustration-03.png +0 -0
  45. data/styleguide/assets/images/illustration-04.png +0 -0
  46. data/styleguide/assets/images/illustration-05.png +0 -0
  47. data/styleguide/assets/images/illustration-06.png +0 -0
  48. data/styleguide/assets/images/illustration-07.png +0 -0
  49. data/styleguide/assets/images/illustration-08.png +0 -0
  50. data/styleguide/assets/images/infographic-01.png +0 -0
  51. data/styleguide/assets/images/infographic-02.png +0 -0
  52. data/styleguide/assets/images/lifestyle-photography-01.png +0 -0
  53. data/styleguide/assets/images/lifestyle-photography-02.png +0 -0
  54. data/styleguide/assets/images/lifestyle-photography-03.png +0 -0
  55. data/styleguide/assets/images/lifestyle-photography-04.png +0 -0
  56. data/styleguide/assets/images/lifestyle-photography-05.png +0 -0
  57. data/styleguide/assets/images/lifestyle-photography-06.png +0 -0
  58. data/styleguide/assets/images/lifestyle-photography-07.png +0 -0
  59. data/styleguide/assets/images/lifestyle-photography-08.png +0 -0
  60. data/styleguide/assets/images/npm-logo.png +0 -0
  61. data/styleguide/assets/images/object-photography-01.png +0 -0
  62. data/styleguide/assets/images/object-photography-02.png +0 -0
  63. data/styleguide/assets/images/object-photography-03.png +0 -0
  64. data/styleguide/assets/images/object-photography-04.png +0 -0
  65. data/styleguide/assets/images/object-photography-05.png +0 -0
  66. data/styleguide/assets/images/object-photography-06.png +0 -0
  67. data/styleguide/assets/images/object-photography-07.png +0 -0
  68. data/styleguide/assets/images/object-photography-08.png +0 -0
  69. data/styleguide/assets/images/ruby-logo.png +0 -0
  70. data/styleguide/assets/images/ustyle.svg +73 -0
  71. data/styleguide/assets/javascripts/app.js +91 -0
  72. data/styleguide/assets/javascripts/modules/cleanWhiteSpace.js +34 -0
  73. data/styleguide/assets/javascripts/modules/stats.js +51 -0
  74. data/styleguide/assets/javascripts/vendor/highlight.js +1 -0
  75. data/styleguide/assets/sass/main.scss +152 -0
  76. data/styleguide/assets/sass/modules/_code.scss +8 -0
  77. data/styleguide/assets/sass/modules/_colours.scss +25 -0
  78. data/styleguide/assets/sass/modules/_copyright.scss +4 -0
  79. data/styleguide/assets/sass/modules/_grid.scss +12 -0
  80. data/styleguide/assets/sass/modules/_home.scss +5 -0
  81. data/styleguide/assets/sass/modules/_links.scss +3 -0
  82. data/styleguide/assets/sass/modules/_logo.scss +56 -0
  83. data/styleguide/assets/sass/modules/_made-at.scss +6 -0
  84. data/styleguide/assets/sass/modules/_markdown.scss +7 -0
  85. data/styleguide/assets/sass/modules/_nav-mobile.scss +72 -0
  86. data/styleguide/assets/sass/modules/_nav.scss +32 -0
  87. data/styleguide/assets/sass/modules/_sidebar.scss +94 -0
  88. data/styleguide/assets/sass/modules/_states.scss +4 -0
  89. data/styleguide/assets/sass/modules/_styleguide.scss +134 -0
  90. data/styleguide/assets/sass/modules/_table.scss +3 -0
  91. data/styleguide/assets/sass/modules/_tooltip.scss +9 -0
  92. data/styleguide/assets/sass/modules/_typography.scss +14 -0
  93. data/styleguide/assets/sass/modules/_version.scss +11 -0
  94. data/styleguide/assets/sass/structure/_base.scss +18 -0
  95. data/styleguide/assets/sass/structure/_header.scss +12 -0
  96. data/styleguide/assets/sass/vendor/_highlight.scss +139 -0
  97. data/styleguide/assets/sass/vendor/_pure-table.scss +75 -0
  98. data/styleguide/content/brand/index.md +47 -0
  99. data/styleguide/content/brand/language.md +102 -0
  100. data/styleguide/content/brand/logo.tpl +102 -0
  101. data/styleguide/content/design/index.tpl +79 -0
  102. data/styleguide/content/design/typography.md +30 -0
  103. data/styleguide/content/index.tpl +44 -0
  104. data/styleguide/content/pattern-library/grid.tpl +64 -0
  105. data/styleguide/content/pattern-library/index.tpl +92 -0
  106. data/styleguide/partials/_footer.tpl +8 -0
  107. data/styleguide/partials/_head.tpl +20 -0
  108. data/styleguide/partials/_header.tpl +7 -0
  109. data/styleguide/partials/_sidebar.tpl +22 -0
  110. data/styleguide/partials/colour.tpl +24 -0
  111. data/styleguide/partials/icons.tpl +28 -0
  112. data/styleguide/partials/style_block.tpl +44 -0
  113. data/styleguide/templates/simple.tpl +15 -0
  114. data/styleguide/templates/stats.tpl +50 -0
  115. data/styleguide/templates/styleguide.tpl +33 -0
  116. data/tasks/publish.rake +65 -0
  117. data/ustyle.gemspec +34 -0
  118. data/vendor/assets/images/icons/16px/alarm.png +0 -0
  119. data/vendor/assets/images/icons/16px/android.png +0 -0
  120. data/vendor/assets/images/icons/16px/angry.png +0 -0
  121. data/vendor/assets/images/icons/16px/apple.png +0 -0
  122. data/vendor/assets/images/icons/16px/arrow-circle.png +0 -0
  123. data/vendor/assets/images/icons/16px/arrow-up-left.png +0 -0
  124. data/vendor/assets/images/icons/16px/arrow-up.png +0 -0
  125. data/vendor/assets/images/icons/16px/barchart.png +0 -0
  126. data/vendor/assets/images/icons/16px/blackberry.png +0 -0
  127. data/vendor/assets/images/icons/16px/book.png +0 -0
  128. data/vendor/assets/images/icons/16px/bookmark.png +0 -0
  129. data/vendor/assets/images/icons/16px/breadcrumb.png +0 -0
  130. data/vendor/assets/images/icons/16px/calculator.png +0 -0
  131. data/vendor/assets/images/icons/16px/calendar.png +0 -0
  132. data/vendor/assets/images/icons/16px/car.png +0 -0
  133. data/vendor/assets/images/icons/16px/checkbox-tick.png +0 -0
  134. data/vendor/assets/images/icons/16px/clock.png +0 -0
  135. data/vendor/assets/images/icons/16px/close.png +0 -0
  136. data/vendor/assets/images/icons/16px/cog.png +0 -0
  137. data/vendor/assets/images/icons/16px/controller.png +0 -0
  138. data/vendor/assets/images/icons/16px/credit-card.png +0 -0
  139. data/vendor/assets/images/icons/16px/cross.png +0 -0
  140. data/vendor/assets/images/icons/16px/desktop.png +0 -0
  141. data/vendor/assets/images/icons/16px/doc.png +0 -0
  142. data/vendor/assets/images/icons/16px/down-arrow.png +0 -0
  143. data/vendor/assets/images/icons/16px/dual-fuel.png +0 -0
  144. data/vendor/assets/images/icons/16px/electric-light.png +0 -0
  145. data/vendor/assets/images/icons/16px/envelope.png +0 -0
  146. data/vendor/assets/images/icons/16px/exit-noexit.png +0 -0
  147. data/vendor/assets/images/icons/16px/facebook.png +0 -0
  148. data/vendor/assets/images/icons/16px/filter.png +0 -0
  149. data/vendor/assets/images/icons/16px/fixed-variable.png +0 -0
  150. data/vendor/assets/images/icons/16px/gas.png +0 -0
  151. data/vendor/assets/images/icons/16px/gauge.png +0 -0
  152. data/vendor/assets/images/icons/16px/github.png +0 -0
  153. data/vendor/assets/images/icons/16px/google.png +0 -0
  154. data/vendor/assets/images/icons/16px/graph-up.png +0 -0
  155. data/vendor/assets/images/icons/16px/happy.png +0 -0
  156. data/vendor/assets/images/icons/16px/home.png +0 -0
  157. data/vendor/assets/images/icons/16px/hot.png +0 -0
  158. data/vendor/assets/images/icons/16px/info.png +0 -0
  159. data/vendor/assets/images/icons/16px/kettle.png +0 -0
  160. data/vendor/assets/images/icons/16px/key.png +0 -0
  161. data/vendor/assets/images/icons/16px/laptop.png +0 -0
  162. data/vendor/assets/images/icons/16px/lock.png +0 -0
  163. data/vendor/assets/images/icons/16px/magnify-in.png +0 -0
  164. data/vendor/assets/images/icons/16px/magnify-out.png +0 -0
  165. data/vendor/assets/images/icons/16px/magnify.png +0 -0
  166. data/vendor/assets/images/icons/16px/menu.png +0 -0
  167. data/vendor/assets/images/icons/16px/message.png +0 -0
  168. data/vendor/assets/images/icons/16px/mobile.png +0 -0
  169. data/vendor/assets/images/icons/16px/monthly-dd.png +0 -0
  170. data/vendor/assets/images/icons/16px/neutral.png +0 -0
  171. data/vendor/assets/images/icons/16px/no-exit.png +0 -0
  172. data/vendor/assets/images/icons/16px/pdf.png +0 -0
  173. data/vendor/assets/images/icons/16px/pencil.png +0 -0
  174. data/vendor/assets/images/icons/16px/person-add.png +0 -0
  175. data/vendor/assets/images/icons/16px/person.png +0 -0
  176. data/vendor/assets/images/icons/16px/phone.png +0 -0
  177. data/vendor/assets/images/icons/16px/piggy-bank.png +0 -0
  178. data/vendor/assets/images/icons/16px/pin.png +0 -0
  179. data/vendor/assets/images/icons/16px/play.png +0 -0
  180. data/vendor/assets/images/icons/16px/pound-circle.png +0 -0
  181. data/vendor/assets/images/icons/16px/pound-note.png +0 -0
  182. data/vendor/assets/images/icons/16px/power.png +0 -0
  183. data/vendor/assets/images/icons/16px/present.png +0 -0
  184. data/vendor/assets/images/icons/16px/print.png +0 -0
  185. data/vendor/assets/images/icons/16px/quarterly-dd.png +0 -0
  186. data/vendor/assets/images/icons/16px/question-circle.png +0 -0
  187. data/vendor/assets/images/icons/16px/question.png +0 -0
  188. data/vendor/assets/images/icons/16px/quote.png +0 -0
  189. data/vendor/assets/images/icons/16px/recycle.png +0 -0
  190. data/vendor/assets/images/icons/16px/remove.png +0 -0
  191. data/vendor/assets/images/icons/16px/renewable.png +0 -0
  192. data/vendor/assets/images/icons/16px/results.png +0 -0
  193. data/vendor/assets/images/icons/16px/sad.png +0 -0
  194. data/vendor/assets/images/icons/16px/save.png +0 -0
  195. data/vendor/assets/images/icons/16px/share.png +0 -0
  196. data/vendor/assets/images/icons/16px/sim.png +0 -0
  197. data/vendor/assets/images/icons/16px/smiley.png +0 -0
  198. data/vendor/assets/images/icons/16px/sort.png +0 -0
  199. data/vendor/assets/images/icons/16px/speech-circle.png +0 -0
  200. data/vendor/assets/images/icons/16px/speech.png +0 -0
  201. data/vendor/assets/images/icons/16px/spinner 2.png +0 -0
  202. data/vendor/assets/images/icons/16px/spinner.png +0 -0
  203. data/vendor/assets/images/icons/16px/star-half.png +0 -0
  204. data/vendor/assets/images/icons/16px/star.png +0 -0
  205. data/vendor/assets/images/icons/16px/starline-half.png +0 -0
  206. data/vendor/assets/images/icons/16px/starline.png +0 -0
  207. data/vendor/assets/images/icons/16px/tablet.png +0 -0
  208. data/vendor/assets/images/icons/16px/talk.png +0 -0
  209. data/vendor/assets/images/icons/16px/tick-circle.png +0 -0
  210. data/vendor/assets/images/icons/16px/tick.png +0 -0
  211. data/vendor/assets/images/icons/16px/tv.png +0 -0
  212. data/vendor/assets/images/icons/16px/twitter.png +0 -0
  213. data/vendor/assets/images/icons/16px/ustyle.png +0 -0
  214. data/vendor/assets/images/icons/16px/uswitch.png +0 -0
  215. data/vendor/assets/images/icons/16px/variable.png +0 -0
  216. data/vendor/assets/images/icons/16px/warning-circle.png +0 -0
  217. data/vendor/assets/images/icons/16px/warning.png +0 -0
  218. data/vendor/assets/images/icons/16px/wifi.png +0 -0
  219. data/vendor/assets/images/icons/16px/wiki.png +0 -0
  220. data/vendor/assets/images/icons/16px/windows.png +0 -0
  221. data/vendor/assets/images/icons/16px/wondering.png +0 -0
  222. data/vendor/assets/images/icons/16px/world.png +0 -0
  223. data/vendor/assets/images/icons/16px/xml.png +0 -0
  224. data/vendor/assets/images/icons/32px/alarm.png +0 -0
  225. data/vendor/assets/images/icons/32px/android.png +0 -0
  226. data/vendor/assets/images/icons/32px/angry.png +0 -0
  227. data/vendor/assets/images/icons/32px/apple.png +0 -0
  228. data/vendor/assets/images/icons/32px/arrow-circle.png +0 -0
  229. data/vendor/assets/images/icons/32px/arrow-up-left.png +0 -0
  230. data/vendor/assets/images/icons/32px/arrow-up.png +0 -0
  231. data/vendor/assets/images/icons/32px/barchart.png +0 -0
  232. data/vendor/assets/images/icons/32px/blackberry.png +0 -0
  233. data/vendor/assets/images/icons/32px/book.png +0 -0
  234. data/vendor/assets/images/icons/32px/bookmark.png +0 -0
  235. data/vendor/assets/images/icons/32px/breadcrumb.png +0 -0
  236. data/vendor/assets/images/icons/32px/calculator.png +0 -0
  237. data/vendor/assets/images/icons/32px/calendar.png +0 -0
  238. data/vendor/assets/images/icons/32px/car.png +0 -0
  239. data/vendor/assets/images/icons/32px/checkbox-tick.png +0 -0
  240. data/vendor/assets/images/icons/32px/clock.png +0 -0
  241. data/vendor/assets/images/icons/32px/close.png +0 -0
  242. data/vendor/assets/images/icons/32px/cog.png +0 -0
  243. data/vendor/assets/images/icons/32px/controller.png +0 -0
  244. data/vendor/assets/images/icons/32px/credit-card.png +0 -0
  245. data/vendor/assets/images/icons/32px/cross.png +0 -0
  246. data/vendor/assets/images/icons/32px/desktop.png +0 -0
  247. data/vendor/assets/images/icons/32px/doc.png +0 -0
  248. data/vendor/assets/images/icons/32px/down-arrow.png +0 -0
  249. data/vendor/assets/images/icons/32px/dual-fuel.png +0 -0
  250. data/vendor/assets/images/icons/32px/electric-light.png +0 -0
  251. data/vendor/assets/images/icons/32px/envelope.png +0 -0
  252. data/vendor/assets/images/icons/32px/exit-noexit.png +0 -0
  253. data/vendor/assets/images/icons/32px/facebook.png +0 -0
  254. data/vendor/assets/images/icons/32px/filter.png +0 -0
  255. data/vendor/assets/images/icons/32px/fixed-variable.png +0 -0
  256. data/vendor/assets/images/icons/32px/gas.png +0 -0
  257. data/vendor/assets/images/icons/32px/gauge.png +0 -0
  258. data/vendor/assets/images/icons/32px/github.png +0 -0
  259. data/vendor/assets/images/icons/32px/google.png +0 -0
  260. data/vendor/assets/images/icons/32px/graph-up.png +0 -0
  261. data/vendor/assets/images/icons/32px/happy.png +0 -0
  262. data/vendor/assets/images/icons/32px/home.png +0 -0
  263. data/vendor/assets/images/icons/32px/hot.png +0 -0
  264. data/vendor/assets/images/icons/32px/info.png +0 -0
  265. data/vendor/assets/images/icons/32px/kettle.png +0 -0
  266. data/vendor/assets/images/icons/32px/key.png +0 -0
  267. data/vendor/assets/images/icons/32px/laptop.png +0 -0
  268. data/vendor/assets/images/icons/32px/lock.png +0 -0
  269. data/vendor/assets/images/icons/32px/magnify-in.png +0 -0
  270. data/vendor/assets/images/icons/32px/magnify-out.png +0 -0
  271. data/vendor/assets/images/icons/32px/magnify.png +0 -0
  272. data/vendor/assets/images/icons/32px/menu.png +0 -0
  273. data/vendor/assets/images/icons/32px/message.png +0 -0
  274. data/vendor/assets/images/icons/32px/mobile.png +0 -0
  275. data/vendor/assets/images/icons/32px/monthly-dd.png +0 -0
  276. data/vendor/assets/images/icons/32px/neutral.png +0 -0
  277. data/vendor/assets/images/icons/32px/no-exit.png +0 -0
  278. data/vendor/assets/images/icons/32px/pdf.png +0 -0
  279. data/vendor/assets/images/icons/32px/pencil.png +0 -0
  280. data/vendor/assets/images/icons/32px/person-add.png +0 -0
  281. data/vendor/assets/images/icons/32px/person.png +0 -0
  282. data/vendor/assets/images/icons/32px/phone.png +0 -0
  283. data/vendor/assets/images/icons/32px/piggy-bank.png +0 -0
  284. data/vendor/assets/images/icons/32px/pin.png +0 -0
  285. data/vendor/assets/images/icons/32px/play.png +0 -0
  286. data/vendor/assets/images/icons/32px/pound-circle.png +0 -0
  287. data/vendor/assets/images/icons/32px/pound-note.png +0 -0
  288. data/vendor/assets/images/icons/32px/power.png +0 -0
  289. data/vendor/assets/images/icons/32px/present.png +0 -0
  290. data/vendor/assets/images/icons/32px/print.png +0 -0
  291. data/vendor/assets/images/icons/32px/quarterly-dd.png +0 -0
  292. data/vendor/assets/images/icons/32px/question-circle.png +0 -0
  293. data/vendor/assets/images/icons/32px/question.png +0 -0
  294. data/vendor/assets/images/icons/32px/quote.png +0 -0
  295. data/vendor/assets/images/icons/32px/recycle.png +0 -0
  296. data/vendor/assets/images/icons/32px/remove.png +0 -0
  297. data/vendor/assets/images/icons/32px/renewable.png +0 -0
  298. data/vendor/assets/images/icons/32px/results.png +0 -0
  299. data/vendor/assets/images/icons/32px/sad.png +0 -0
  300. data/vendor/assets/images/icons/32px/save.png +0 -0
  301. data/vendor/assets/images/icons/32px/share.png +0 -0
  302. data/vendor/assets/images/icons/32px/sim.png +0 -0
  303. data/vendor/assets/images/icons/32px/smiley.png +0 -0
  304. data/vendor/assets/images/icons/32px/sort.png +0 -0
  305. data/vendor/assets/images/icons/32px/speech-circle.png +0 -0
  306. data/vendor/assets/images/icons/32px/speech.png +0 -0
  307. data/vendor/assets/images/icons/32px/spinner 2.png +0 -0
  308. data/vendor/assets/images/icons/32px/spinner.png +0 -0
  309. data/vendor/assets/images/icons/32px/star-half.png +0 -0
  310. data/vendor/assets/images/icons/32px/star.png +0 -0
  311. data/vendor/assets/images/icons/32px/starline-half.png +0 -0
  312. data/vendor/assets/images/icons/32px/starline.png +0 -0
  313. data/vendor/assets/images/icons/32px/tablet.png +0 -0
  314. data/vendor/assets/images/icons/32px/talk.png +0 -0
  315. data/vendor/assets/images/icons/32px/tick-circle.png +0 -0
  316. data/vendor/assets/images/icons/32px/tick.png +0 -0
  317. data/vendor/assets/images/icons/32px/tv.png +0 -0
  318. data/vendor/assets/images/icons/32px/twitter.png +0 -0
  319. data/vendor/assets/images/icons/32px/ustyle.png +0 -0
  320. data/vendor/assets/images/icons/32px/uswitch.png +0 -0
  321. data/vendor/assets/images/icons/32px/variable.png +0 -0
  322. data/vendor/assets/images/icons/32px/warning-circle.png +0 -0
  323. data/vendor/assets/images/icons/32px/warning.png +0 -0
  324. data/vendor/assets/images/icons/32px/wifi.png +0 -0
  325. data/vendor/assets/images/icons/32px/wiki.png +0 -0
  326. data/vendor/assets/images/icons/32px/windows.png +0 -0
  327. data/vendor/assets/images/icons/32px/wondering.png +0 -0
  328. data/vendor/assets/images/icons/32px/world.png +0 -0
  329. data/vendor/assets/images/icons/32px/xml.png +0 -0
  330. data/vendor/assets/images/icons/64px/alarm.png +0 -0
  331. data/vendor/assets/images/icons/64px/android.png +0 -0
  332. data/vendor/assets/images/icons/64px/angry.png +0 -0
  333. data/vendor/assets/images/icons/64px/apple.png +0 -0
  334. data/vendor/assets/images/icons/64px/arrow-circle.png +0 -0
  335. data/vendor/assets/images/icons/64px/arrow-up-left.png +0 -0
  336. data/vendor/assets/images/icons/64px/arrow-up.png +0 -0
  337. data/vendor/assets/images/icons/64px/barchart.png +0 -0
  338. data/vendor/assets/images/icons/64px/blackberry.png +0 -0
  339. data/vendor/assets/images/icons/64px/book.png +0 -0
  340. data/vendor/assets/images/icons/64px/bookmark.png +0 -0
  341. data/vendor/assets/images/icons/64px/breadcrumb.png +0 -0
  342. data/vendor/assets/images/icons/64px/calculator.png +0 -0
  343. data/vendor/assets/images/icons/64px/calendar.png +0 -0
  344. data/vendor/assets/images/icons/64px/car.png +0 -0
  345. data/vendor/assets/images/icons/64px/checkbox-tick.png +0 -0
  346. data/vendor/assets/images/icons/64px/clock.png +0 -0
  347. data/vendor/assets/images/icons/64px/close.png +0 -0
  348. data/vendor/assets/images/icons/64px/cog.png +0 -0
  349. data/vendor/assets/images/icons/64px/controller.png +0 -0
  350. data/vendor/assets/images/icons/64px/credit-card.png +0 -0
  351. data/vendor/assets/images/icons/64px/cross.png +0 -0
  352. data/vendor/assets/images/icons/64px/desktop.png +0 -0
  353. data/vendor/assets/images/icons/64px/doc.png +0 -0
  354. data/vendor/assets/images/icons/64px/down-arrow.png +0 -0
  355. data/vendor/assets/images/icons/64px/dual-fuel.png +0 -0
  356. data/vendor/assets/images/icons/64px/electric-light.png +0 -0
  357. data/vendor/assets/images/icons/64px/envelope.png +0 -0
  358. data/vendor/assets/images/icons/64px/exit-noexit.png +0 -0
  359. data/vendor/assets/images/icons/64px/facebook.png +0 -0
  360. data/vendor/assets/images/icons/64px/filter.png +0 -0
  361. data/vendor/assets/images/icons/64px/fixed-variable.png +0 -0
  362. data/vendor/assets/images/icons/64px/gas.png +0 -0
  363. data/vendor/assets/images/icons/64px/gauge.png +0 -0
  364. data/vendor/assets/images/icons/64px/github.png +0 -0
  365. data/vendor/assets/images/icons/64px/google.png +0 -0
  366. data/vendor/assets/images/icons/64px/graph-up.png +0 -0
  367. data/vendor/assets/images/icons/64px/happy.png +0 -0
  368. data/vendor/assets/images/icons/64px/home.png +0 -0
  369. data/vendor/assets/images/icons/64px/hot.png +0 -0
  370. data/vendor/assets/images/icons/64px/info.png +0 -0
  371. data/vendor/assets/images/icons/64px/kettle.png +0 -0
  372. data/vendor/assets/images/icons/64px/key.png +0 -0
  373. data/vendor/assets/images/icons/64px/laptop.png +0 -0
  374. data/vendor/assets/images/icons/64px/lock.png +0 -0
  375. data/vendor/assets/images/icons/64px/magnify-in.png +0 -0
  376. data/vendor/assets/images/icons/64px/magnify-out.png +0 -0
  377. data/vendor/assets/images/icons/64px/magnify.png +0 -0
  378. data/vendor/assets/images/icons/64px/menu.png +0 -0
  379. data/vendor/assets/images/icons/64px/message.png +0 -0
  380. data/vendor/assets/images/icons/64px/mobile.png +0 -0
  381. data/vendor/assets/images/icons/64px/monthly-dd.png +0 -0
  382. data/vendor/assets/images/icons/64px/neutral.png +0 -0
  383. data/vendor/assets/images/icons/64px/no-exit.png +0 -0
  384. data/vendor/assets/images/icons/64px/pdf.png +0 -0
  385. data/vendor/assets/images/icons/64px/pencil.png +0 -0
  386. data/vendor/assets/images/icons/64px/person-add.png +0 -0
  387. data/vendor/assets/images/icons/64px/person.png +0 -0
  388. data/vendor/assets/images/icons/64px/phone.png +0 -0
  389. data/vendor/assets/images/icons/64px/piggy-bank.png +0 -0
  390. data/vendor/assets/images/icons/64px/pin.png +0 -0
  391. data/vendor/assets/images/icons/64px/play.png +0 -0
  392. data/vendor/assets/images/icons/64px/pound-circle.png +0 -0
  393. data/vendor/assets/images/icons/64px/pound-note.png +0 -0
  394. data/vendor/assets/images/icons/64px/power.png +0 -0
  395. data/vendor/assets/images/icons/64px/present.png +0 -0
  396. data/vendor/assets/images/icons/64px/print.png +0 -0
  397. data/vendor/assets/images/icons/64px/quarterly-dd.png +0 -0
  398. data/vendor/assets/images/icons/64px/question-circle.png +0 -0
  399. data/vendor/assets/images/icons/64px/question.png +0 -0
  400. data/vendor/assets/images/icons/64px/quote.png +0 -0
  401. data/vendor/assets/images/icons/64px/recycle.png +0 -0
  402. data/vendor/assets/images/icons/64px/remove.png +0 -0
  403. data/vendor/assets/images/icons/64px/renewable.png +0 -0
  404. data/vendor/assets/images/icons/64px/results.png +0 -0
  405. data/vendor/assets/images/icons/64px/sad.png +0 -0
  406. data/vendor/assets/images/icons/64px/save.png +0 -0
  407. data/vendor/assets/images/icons/64px/share.png +0 -0
  408. data/vendor/assets/images/icons/64px/sim.png +0 -0
  409. data/vendor/assets/images/icons/64px/smiley.png +0 -0
  410. data/vendor/assets/images/icons/64px/sort.png +0 -0
  411. data/vendor/assets/images/icons/64px/speech-circle.png +0 -0
  412. data/vendor/assets/images/icons/64px/speech.png +0 -0
  413. data/vendor/assets/images/icons/64px/spinner 2.png +0 -0
  414. data/vendor/assets/images/icons/64px/spinner.png +0 -0
  415. data/vendor/assets/images/icons/64px/star-half.png +0 -0
  416. data/vendor/assets/images/icons/64px/star.png +0 -0
  417. data/vendor/assets/images/icons/64px/starline-half.png +0 -0
  418. data/vendor/assets/images/icons/64px/starline.png +0 -0
  419. data/vendor/assets/images/icons/64px/tablet.png +0 -0
  420. data/vendor/assets/images/icons/64px/talk.png +0 -0
  421. data/vendor/assets/images/icons/64px/tick-circle.png +0 -0
  422. data/vendor/assets/images/icons/64px/tick.png +0 -0
  423. data/vendor/assets/images/icons/64px/tv.png +0 -0
  424. data/vendor/assets/images/icons/64px/twitter.png +0 -0
  425. data/vendor/assets/images/icons/64px/ustyle.png +0 -0
  426. data/vendor/assets/images/icons/64px/uswitch.png +0 -0
  427. data/vendor/assets/images/icons/64px/variable.png +0 -0
  428. data/vendor/assets/images/icons/64px/warning-circle.png +0 -0
  429. data/vendor/assets/images/icons/64px/warning.png +0 -0
  430. data/vendor/assets/images/icons/64px/wifi.png +0 -0
  431. data/vendor/assets/images/icons/64px/wiki.png +0 -0
  432. data/vendor/assets/images/icons/64px/windows.png +0 -0
  433. data/vendor/assets/images/icons/64px/wondering.png +0 -0
  434. data/vendor/assets/images/icons/64px/world.png +0 -0
  435. data/vendor/assets/images/icons/64px/xml.png +0 -0
  436. data/vendor/assets/images/icons/alarm.svg +1 -0
  437. data/vendor/assets/images/icons/android.svg +1 -0
  438. data/vendor/assets/images/icons/angry.svg +1 -0
  439. data/vendor/assets/images/icons/apple.svg +1 -0
  440. data/vendor/assets/images/icons/arrow-circle.svg +1 -0
  441. data/vendor/assets/images/icons/arrow-up-left.svg +1 -0
  442. data/vendor/assets/images/icons/arrow-up.svg +1 -0
  443. data/vendor/assets/images/icons/barchart.svg +1 -0
  444. data/vendor/assets/images/icons/blackberry.svg +1 -0
  445. data/vendor/assets/images/icons/book.svg +1 -0
  446. data/vendor/assets/images/icons/bookmark.svg +1 -0
  447. data/vendor/assets/images/icons/breadcrumb.svg +1 -0
  448. data/vendor/assets/images/icons/calculator.svg +1 -0
  449. data/vendor/assets/images/icons/calendar.svg +1 -0
  450. data/vendor/assets/images/icons/car.svg +1 -0
  451. data/vendor/assets/images/icons/checkbox-tick.svg +1 -0
  452. data/vendor/assets/images/icons/clock.svg +1 -0
  453. data/vendor/assets/images/icons/close.svg +1 -0
  454. data/vendor/assets/images/icons/cog.svg +1 -0
  455. data/vendor/assets/images/icons/controller.svg +1 -0
  456. data/vendor/assets/images/icons/credit-card.svg +1 -0
  457. data/vendor/assets/images/icons/cross.svg +1 -0
  458. data/vendor/assets/images/icons/desktop.svg +1 -0
  459. data/vendor/assets/images/icons/doc.svg +1 -0
  460. data/vendor/assets/images/icons/down-arrow.svg +1 -0
  461. data/vendor/assets/images/icons/dual-fuel.svg +1 -0
  462. data/vendor/assets/images/icons/electric-light.svg +1 -0
  463. data/vendor/assets/images/icons/envelope.svg +1 -0
  464. data/vendor/assets/images/icons/exit-noexit.svg +1 -0
  465. data/vendor/assets/images/icons/facebook.svg +1 -0
  466. data/vendor/assets/images/icons/filter.svg +1 -0
  467. data/vendor/assets/images/icons/fixed-variable.svg +1 -0
  468. data/vendor/assets/images/icons/gas.svg +1 -0
  469. data/vendor/assets/images/icons/gauge.svg +1 -0
  470. data/vendor/assets/images/icons/github.svg +1 -0
  471. data/vendor/assets/images/icons/google.svg +1 -0
  472. data/vendor/assets/images/icons/graph-up.svg +1 -0
  473. data/vendor/assets/images/icons/happy.svg +1 -0
  474. data/vendor/assets/images/icons/home.svg +1 -0
  475. data/vendor/assets/images/icons/hot.svg +1 -0
  476. data/vendor/assets/images/icons/info.svg +1 -0
  477. data/vendor/assets/images/icons/kettle.svg +1 -0
  478. data/vendor/assets/images/icons/key.svg +1 -0
  479. data/vendor/assets/images/icons/laptop.svg +1 -0
  480. data/vendor/assets/images/icons/lock.svg +1 -0
  481. data/vendor/assets/images/icons/magnify-in.svg +1 -0
  482. data/vendor/assets/images/icons/magnify-out.svg +1 -0
  483. data/vendor/assets/images/icons/magnify.svg +1 -0
  484. data/vendor/assets/images/icons/menu.svg +1 -0
  485. data/vendor/assets/images/icons/message.svg +1 -0
  486. data/vendor/assets/images/icons/mobile.svg +1 -0
  487. data/vendor/assets/images/icons/monthly-dd.svg +1 -0
  488. data/vendor/assets/images/icons/neutral.svg +1 -0
  489. data/vendor/assets/images/icons/no-exit.svg +1 -0
  490. data/vendor/assets/images/icons/pdf.svg +1 -0
  491. data/vendor/assets/images/icons/pencil.svg +1 -0
  492. data/vendor/assets/images/icons/person-add.svg +1 -0
  493. data/vendor/assets/images/icons/person.svg +1 -0
  494. data/vendor/assets/images/icons/phone.svg +1 -0
  495. data/vendor/assets/images/icons/piggy-bank.svg +1 -0
  496. data/vendor/assets/images/icons/pin.svg +1 -0
  497. data/vendor/assets/images/icons/play.svg +1 -0
  498. data/vendor/assets/images/icons/pound-circle.svg +1 -0
  499. data/vendor/assets/images/icons/pound-note.svg +1 -0
  500. data/vendor/assets/images/icons/power.svg +1 -0
  501. data/vendor/assets/images/icons/present.svg +1 -0
  502. data/vendor/assets/images/icons/print.svg +1 -0
  503. data/vendor/assets/images/icons/quarterly-dd.svg +1 -0
  504. data/vendor/assets/images/icons/question-circle.svg +1 -0
  505. data/vendor/assets/images/icons/question.svg +1 -0
  506. data/vendor/assets/images/icons/quote.svg +1 -0
  507. data/vendor/assets/images/icons/recycle.svg +1 -0
  508. data/vendor/assets/images/icons/remove.svg +1 -0
  509. data/vendor/assets/images/icons/renewable.svg +1 -0
  510. data/vendor/assets/images/icons/results.svg +1 -0
  511. data/vendor/assets/images/icons/sad.svg +1 -0
  512. data/vendor/assets/images/icons/save.svg +1 -0
  513. data/vendor/assets/images/icons/share.svg +1 -0
  514. data/vendor/assets/images/icons/sim.svg +1 -0
  515. data/vendor/assets/images/icons/smiley.svg +1 -0
  516. data/vendor/assets/images/icons/sort.svg +1 -0
  517. data/vendor/assets/images/icons/speech-circle.svg +1 -0
  518. data/vendor/assets/images/icons/speech.svg +1 -0
  519. data/vendor/assets/images/icons/spinner 2.svg +1 -0
  520. data/vendor/assets/images/icons/spinner.svg +1 -0
  521. data/vendor/assets/images/icons/spinner_fallback.gif +0 -0
  522. data/vendor/assets/images/icons/star-half.svg +1 -0
  523. data/vendor/assets/images/icons/star.svg +1 -0
  524. data/vendor/assets/images/icons/starline-half.svg +1 -0
  525. data/vendor/assets/images/icons/starline.svg +1 -0
  526. data/vendor/assets/images/icons/tablet.svg +1 -0
  527. data/vendor/assets/images/icons/talk.svg +1 -0
  528. data/vendor/assets/images/icons/tick-circle.svg +1 -0
  529. data/vendor/assets/images/icons/tick.svg +1 -0
  530. data/vendor/assets/images/icons/tv.svg +1 -0
  531. data/vendor/assets/images/icons/twitter.svg +1 -0
  532. data/vendor/assets/images/icons/ustyle.svg +1 -0
  533. data/vendor/assets/images/icons/uswitch.svg +1 -0
  534. data/vendor/assets/images/icons/variable.svg +1 -0
  535. data/vendor/assets/images/icons/warning-circle.svg +1 -0
  536. data/vendor/assets/images/icons/warning.svg +1 -0
  537. data/vendor/assets/images/icons/wifi.svg +1 -0
  538. data/vendor/assets/images/icons/wiki.svg +1 -0
  539. data/vendor/assets/images/icons/windows.svg +1 -0
  540. data/vendor/assets/images/icons/wondering.svg +1 -0
  541. data/vendor/assets/images/icons/world.svg +1 -0
  542. data/vendor/assets/images/icons/xml.svg +1 -0
  543. data/vendor/assets/javascripts/ustyle/anchor.js +300 -0
  544. data/vendor/assets/javascripts/ustyle/backdrop.js +56 -0
  545. data/vendor/assets/javascripts/ustyle/classtoggler.js +58 -0
  546. data/vendor/assets/javascripts/ustyle/login/login.js +165 -0
  547. data/vendor/assets/javascripts/ustyle/login/password-helper.js +151 -0
  548. data/vendor/assets/javascripts/ustyle/overlay.js +125 -0
  549. data/vendor/assets/javascripts/ustyle/radioToggle.js +28 -0
  550. data/vendor/assets/javascripts/ustyle/tabs.js +120 -0
  551. data/vendor/assets/javascripts/ustyle/utils.js +106 -0
  552. data/vendor/assets/javascripts/ustyle.js +7 -0
  553. data/vendor/assets/stylesheets/ustyle/_all.scss +50 -0
  554. data/vendor/assets/stylesheets/ustyle/_content.scss +5 -0
  555. data/vendor/assets/stylesheets/ustyle/_global.scss +24 -0
  556. data/vendor/assets/stylesheets/ustyle/_icons.scss +20 -0
  557. data/vendor/assets/stylesheets/ustyle/articles/_base.scss +88 -0
  558. data/vendor/assets/stylesheets/ustyle/articles/_guide.scss +57 -0
  559. data/vendor/assets/stylesheets/ustyle/articles/_more.scss +31 -0
  560. data/vendor/assets/stylesheets/ustyle/articles/_news.scss +214 -0
  561. data/vendor/assets/stylesheets/ustyle/articles/_related.scss +74 -0
  562. data/vendor/assets/stylesheets/ustyle/basics/_extends.scss +69 -0
  563. data/vendor/assets/stylesheets/ustyle/basics/_font-face-ie.scss +31 -0
  564. data/vendor/assets/stylesheets/ustyle/basics/_font-face.scss +31 -0
  565. data/vendor/assets/stylesheets/ustyle/basics/_fonts.scss +27 -0
  566. data/vendor/assets/stylesheets/ustyle/basics/_functions.scss +78 -0
  567. data/vendor/assets/stylesheets/ustyle/basics/_grid.scss +86 -0
  568. data/vendor/assets/stylesheets/ustyle/basics/_typography.scss +123 -0
  569. data/vendor/assets/stylesheets/ustyle/basics/_variables.scss +188 -0
  570. data/vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss +95 -0
  571. data/vendor/assets/stylesheets/ustyle/basics/variables/_forms.scss +65 -0
  572. data/vendor/assets/stylesheets/ustyle/basics/variables/_icons.scss +166 -0
  573. data/vendor/assets/stylesheets/ustyle/components/_anchor.scss +134 -0
  574. data/vendor/assets/stylesheets/ustyle/components/_backdrop.scss +19 -0
  575. data/vendor/assets/stylesheets/ustyle/components/_breadcrumbs.scss +59 -0
  576. data/vendor/assets/stylesheets/ustyle/components/_button.scss +184 -0
  577. data/vendor/assets/stylesheets/ustyle/components/_content-group.scss +33 -0
  578. data/vendor/assets/stylesheets/ustyle/components/_cta.scss +64 -0
  579. data/vendor/assets/stylesheets/ustyle/components/_featured.scss +112 -0
  580. data/vendor/assets/stylesheets/ustyle/components/_grid-classes.scss +52 -0
  581. data/vendor/assets/stylesheets/ustyle/components/_hero.scss +42 -0
  582. data/vendor/assets/stylesheets/ustyle/components/_links.scss +30 -0
  583. data/vendor/assets/stylesheets/ustyle/components/_lists-li.scss +89 -0
  584. data/vendor/assets/stylesheets/ustyle/components/_lists.scss +46 -0
  585. data/vendor/assets/stylesheets/ustyle/components/_loader.scss +142 -0
  586. data/vendor/assets/stylesheets/ustyle/components/_overlay.scss +183 -0
  587. data/vendor/assets/stylesheets/ustyle/components/_progress.scss +126 -0
  588. data/vendor/assets/stylesheets/ustyle/components/_tabs.scss +239 -0
  589. data/vendor/assets/stylesheets/ustyle/components/_tooltip.scss +244 -0
  590. data/vendor/assets/stylesheets/ustyle/components/_usp.scss +69 -0
  591. data/vendor/assets/stylesheets/ustyle/content/_base.scss +195 -0
  592. data/vendor/assets/stylesheets/ustyle/content/_c-header.scss +30 -0
  593. data/vendor/assets/stylesheets/ustyle/content/_c-social.scss +10 -0
  594. data/vendor/assets/stylesheets/ustyle/content/_c-tabs.scss +30 -0
  595. data/vendor/assets/stylesheets/ustyle/forms/_base.scss +9 -0
  596. data/vendor/assets/stylesheets/ustyle/forms/_fields.scss +75 -0
  597. data/vendor/assets/stylesheets/ustyle/forms/_input-group.scss +101 -0
  598. data/vendor/assets/stylesheets/ustyle/forms/_input.scss +63 -0
  599. data/vendor/assets/stylesheets/ustyle/forms/_radio-checkbox.scss +133 -0
  600. data/vendor/assets/stylesheets/ustyle/forms/_reset.scss +23 -0
  601. data/vendor/assets/stylesheets/ustyle/forms/_select.scss +125 -0
  602. data/vendor/assets/stylesheets/ustyle/forms/_textarea.scss +33 -0
  603. data/vendor/assets/stylesheets/ustyle/forms/_toggle.scss +125 -0
  604. data/vendor/assets/stylesheets/ustyle/forms/_validation.scss +104 -0
  605. data/vendor/assets/stylesheets/ustyle/icons/_base.scss +239 -0
  606. data/vendor/assets/stylesheets/ustyle/icons/_png.scss +37 -0
  607. data/vendor/assets/stylesheets/ustyle/icons/_svg.scss +29 -0
  608. data/vendor/assets/stylesheets/ustyle/login/_base.scss +81 -0
  609. data/vendor/assets/stylesheets/ustyle/login/_password-help.scss +61 -0
  610. data/vendor/assets/stylesheets/ustyle/login/_social.scss +63 -0
  611. data/vendor/assets/stylesheets/ustyle/mixins/_arrow.scss +51 -0
  612. data/vendor/assets/stylesheets/ustyle/mixins/_base.scss +8 -0
  613. data/vendor/assets/stylesheets/ustyle/mixins/_baseline.scss +41 -0
  614. data/vendor/assets/stylesheets/ustyle/mixins/_forms.scss +62 -0
  615. data/vendor/assets/stylesheets/ustyle/mixins/_general.scss +24 -0
  616. data/vendor/assets/stylesheets/ustyle/mixins/_link-colors.scss +44 -0
  617. data/vendor/assets/stylesheets/ustyle/mixins/_media-query.scss +116 -0
  618. data/vendor/assets/stylesheets/ustyle/mixins/_rgba-inline.scss +18 -0
  619. data/vendor/assets/stylesheets/ustyle/mixins/_typography.scss +98 -0
  620. data/vendor/assets/stylesheets/ustyle/tables/_base.scss +4 -0
  621. data/vendor/assets/stylesheets/ustyle/tables/_tables-basic.scss +72 -0
  622. data/vendor/assets/stylesheets/ustyle/tables/_tables-sortable.scss +72 -0
  623. data/vendor/assets/stylesheets/ustyle/tables/_tables-with-key-cells.scss +18 -0
  624. data/vendor/assets/stylesheets/ustyle/tables/_variables.scss +15 -0
  625. data/vendor/assets/stylesheets/ustyle/utilities/_general.scss +106 -0
  626. data/vendor/assets/stylesheets/ustyle/utilities/_grid.scss +13 -0
  627. data/vendor/assets/stylesheets/ustyle/utilities/_images.scss +34 -0
  628. data/vendor/assets/stylesheets/ustyle/utilities/_responsive.scss +101 -0
  629. data/vendor/assets/stylesheets/ustyle/utilities/_spacing.scss +74 -0
  630. data/vendor/assets/stylesheets/ustyle/vendor/normalize.scss +427 -0
  631. data/vendor/assets/stylesheets/ustyle-content.scss +2 -0
  632. data/vendor/assets/stylesheets/ustyle-icons.scss +1 -0
  633. data/vendor/assets/stylesheets/ustyle.scss +1 -0
  634. metadata +822 -0
@@ -0,0 +1,126 @@
1
+ // @page Pattern Library/Components
2
+ // @name Progress navigation
3
+ //
4
+ // @description
5
+ // The progress navigation should be used for any funnel journeys on the website. Once a section has been completed the user should be able to get back to that step.
6
+ // The mobile view of the navigation just has the dotted numbers.
7
+ //
8
+ // @markup
9
+ // <div class="us-progress">
10
+ // <nav>
11
+ // <ul class="us-progress__nav us-clearfix">
12
+ // <li class="us-progress__item">
13
+ // <a href="#" class="us-progress__link us-progress__link--complete">
14
+ // <span class="us-tablet--inline">Current supplier</span>
15
+ // </a>
16
+ // </li>
17
+ // <li class="us-progress__item">
18
+ // <a href="#" class="us-progress__link us-progress__link--complete">
19
+ // <span class="us-tablet--inline">Usage</span>
20
+ // </a>
21
+ // </li>
22
+ // <li class="us-progress__item">
23
+ // <span class="us-progress__link us-progress__link--current">
24
+ // <span class="us-tablet--inline">Results</span>
25
+ // </span>
26
+ // </li>
27
+ // <li class="us-progress__item">
28
+ // <span class="us-progress__link us-progress__link--next">
29
+ // <span class="us-tablet--inline">New tariff</span>
30
+ // </span>
31
+ // </li>
32
+ // <li class="us-progress__item">
33
+ // <span class="us-progress__link us-progress__link--next">
34
+ // <span class="us-tablet--inline">Apply</span>
35
+ // </span>
36
+ // </li>
37
+ // </ul>
38
+ // </nav>
39
+ // </div>
40
+ //
41
+
42
+ $progress-bg-color: $c-navy;
43
+ $progress-current-color: #fff;
44
+ $progress-complete-color: $c-cyan;
45
+ $progress-next-color: tint($c-navy, 50%);
46
+
47
+ .us-progress {
48
+ position: relative;
49
+ z-index: 4;
50
+ background-color: $progress-bg-color;
51
+ }
52
+
53
+ .us-progress__nav {
54
+ @extend %reset-box-model;
55
+ list-style: none;
56
+ counter-reset: number-counter;
57
+ }
58
+
59
+ .us-progress__item {
60
+ @extend %reset-box-model;
61
+ position: relative;
62
+ float: left;
63
+ line-height: 1.5em;
64
+ counter-increment: number-counter;
65
+
66
+ @include respond-to(tablet, true) {
67
+ margin-right: $gutter-width;
68
+ }
69
+ }
70
+
71
+ .us-progress__link {
72
+ position: relative;
73
+ display: block;
74
+ padding-top: .5em;
75
+ padding-bottom: .5em;
76
+
77
+ @include respond-to(tablet, true) {
78
+ padding-top: 1em;
79
+ padding-bottom: 1em;
80
+ }
81
+
82
+ &:before {
83
+ position: relative;
84
+ display: inline-block;
85
+ width: 1.5em;
86
+ height: 1.5em;
87
+ margin-right: $gutter-width/3;
88
+ font-weight: 700;
89
+ color: $c-navy;
90
+ text-align: center;
91
+ border-radius: 50%;
92
+ content: counter(number-counter);
93
+ transition: background-color .3s;
94
+ }
95
+ }
96
+
97
+ .us-progress__link--next {
98
+ color: $progress-next-color;
99
+
100
+ &:before {
101
+ background-color: $progress-next-color;
102
+ }
103
+ }
104
+
105
+
106
+ .us-progress__link--current {
107
+ color: $progress-current-color;
108
+
109
+ &:before {
110
+ background-color: $progress-current-color;
111
+ }
112
+ }
113
+
114
+ .us-progress__link--complete {
115
+ @include link-colors($progress-complete-color, #fff, $progress-complete-color, $progress-complete-color, #fff);
116
+
117
+ &:before {
118
+ background-color: $progress-complete-color;
119
+ }
120
+
121
+ &:hover:before,
122
+ &:active:before {
123
+ background-color: #fff;
124
+ }
125
+ }
126
+
@@ -0,0 +1,239 @@
1
+ // @page Pattern Library/JavaScript
2
+ // @name Tabs
3
+ //
4
+ // @description
5
+ // These are the basic tabs used for landing pages. You can either reference a data-target for the urls or href for the target tabs. They have a non-js fallback and fold over to accordion when in small tablet view. They are initialised on page load if the tabs classes exist.
6
+ //
7
+ // @javascript
8
+ // var tabs = new Tabs({
9
+ // tabContainer: ".us-tabs",
10
+ // tabLinks: ".us-tabs-nav-mainlink",
11
+ // tabTitle: "us-tab-title",
12
+ // activeClass: "active",
13
+ // changeUrls: true,
14
+ // collapsible: true,
15
+ // autoScroll: false
16
+ // });
17
+ //
18
+ // @markup
19
+ // <div class='us-tabs'>
20
+ // <nav class='us-tabs-nav'>
21
+ // <div class='us-tabs-nav-wrapper'>
22
+ // <div class='us-tabs-nav-menu'>
23
+ // <a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab1">Tab 1</a>
24
+ // <a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab2">Tab 2</a>
25
+ // <a class="us-tabs-nav-mainlink us-tabs-nav-link" href="#tab3">Tab 3</a>
26
+ // </div>
27
+ // </div>
28
+ // </nav>
29
+ // <div class='us-tabs-container'>
30
+ // <div class='us-tab' id='tab1'>
31
+ // <h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab1">Test 1</a></h2>
32
+ // <div class='us-tab-content'>
33
+ // <p>Fatback capicola leberkas pork loin pork jowl. Meatloaf shoulder pancetta, salami prosciutto ribeye andouille chuck landjaeger short loin filet mignon sirloin. Pork chop tri-tip ham pork hamburger frankfurter leberkas short ribs biltong. Prosciutto ham hock rump, andouille tongue flank sirloin tri-tip ball tip frankfurter ham drumstick meatloaf pork loin.</p>
34
+ // </div>
35
+ // </div>
36
+ // <div class='us-tab' id='tab2'>
37
+ // <h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab2">Test 2</a></h2>
38
+ // <div class='us-tab-content'>
39
+ // <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>
40
+ // </div>
41
+ // </div>
42
+ // <div class='us-tab' id='tab3'>
43
+ // <h2 class='us-tab-title'><a class="us-tabs-nav-mainlink" href="#tab3">Test 3</a></h2>
44
+ // <div class='us-tab-content'>
45
+ // <p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola meatball. Pork belly beef ham landjaeger.</p>
46
+ // </div>
47
+ // </div>
48
+ // </div>
49
+ // </div>
50
+
51
+ $tab-width: col-width(2) !default;
52
+
53
+ @keyframes tab-show {
54
+ 0% {
55
+ opacity: 0;
56
+ }
57
+
58
+ 100% {
59
+ opacity: 1;
60
+ }
61
+ }
62
+
63
+ // Tab nav
64
+ .us-tabs-nav {
65
+ display: none;
66
+ background-color: $c-navy;
67
+
68
+ @include respond-to(tablet) {
69
+ .js & {
70
+ display: block;
71
+ }
72
+ }
73
+
74
+ .js.ie8 & {
75
+ display: block;
76
+ }
77
+ }
78
+
79
+ .us-tabs-nav-wrapper {
80
+ @extend %container;
81
+ padding-top: $gutter-width / 2;
82
+ }
83
+
84
+ .us-tabs-nav-menu {
85
+ display: table;
86
+ display: -webkit-flex;
87
+ display: flex;
88
+ width: 100%;
89
+ overflow: hidden;
90
+ flex-flow: row;
91
+ }
92
+
93
+ .us-tabs-nav-link {
94
+ @include normal-font;
95
+ @include link-colors(#fff, $c-navy, $c-navy, #fff);
96
+ position: relative;
97
+ z-index: 1;
98
+ display: table-cell;
99
+ width: $tab-width;
100
+ padding: .475em .15em 1.2em;
101
+ text-align: center;
102
+ vertical-align: middle;
103
+ border-radius: 3px 3px 0 0;
104
+ transition: none;
105
+
106
+ @include respond-to(tablet) {
107
+ font-size: em(14px);
108
+ line-height: 1.25em;
109
+ }
110
+
111
+ @include respond-to(desktop) {
112
+ font-size: em($base-font-size);
113
+ }
114
+
115
+ @include respond-to(large-desktop) {
116
+ font-size: em(18px);
117
+ }
118
+
119
+ &:hover {
120
+ background-color: #fff;
121
+ }
122
+
123
+ &.active {
124
+ z-index: 2;
125
+ color: $c-navy;
126
+ background-color: #fff;
127
+ box-shadow: 0 0 10px rgba(0, 0, 0, .5);
128
+ }
129
+ }
130
+
131
+ // scss-lint:disable Comment, MergeableSelector
132
+ .us-tabs-nav-link {
133
+ /* autoprefixer: off */
134
+ display: -webkit-box;
135
+ display: -ms-flexbox;
136
+ display: flex;
137
+ -webkit-box-align: center;
138
+ -webkit-box-pack: center;
139
+ -webkit-justify-content: center;
140
+ justify-content: center;
141
+ -ms-flex-align: center;
142
+ -ms-flex-pack: center;
143
+ -webkit-align-items: center;
144
+ align-items: center;
145
+ -webkit-flex-flow: column;
146
+ -ms-flex-flow: column;
147
+ }
148
+ // scss-lint:enable Comment, MergeableSelector
149
+
150
+ // Tabs
151
+ .us-tabs-container {
152
+ @extend %container;
153
+
154
+ @include respond-to(to-tablet) {
155
+ padding: 0 !important;
156
+ }
157
+ }
158
+
159
+ .us-tab-title {
160
+ @extend %heading-4;
161
+ position: relative;
162
+ margin: 0;
163
+ font-weight: normal;
164
+
165
+ @include respond-to(tablet) {
166
+ .js & {
167
+ display: none;
168
+ }
169
+ }
170
+
171
+ .js.ie8 & {
172
+ display: none;
173
+ }
174
+
175
+ a {
176
+ @include link-colors($c-navy, #fff, $c-navy);
177
+ display: block;
178
+ padding: .5em .75em;
179
+ background-color: $c-cyan;
180
+ border-bottom: 1px solid #fff;
181
+ transition: color 300ms, background-color 300ms;
182
+
183
+ .active & {
184
+ color: #fff;
185
+ background-color: $c-navy;
186
+ }
187
+
188
+ .active &:before {
189
+ transform: rotate(90deg);
190
+ }
191
+
192
+ &:hover:before {
193
+ color: #fff;
194
+ transform: rotate(90deg);
195
+ }
196
+
197
+ &:before {
198
+ @include arrow(10px, 10px, right);
199
+ display: inline-block;
200
+ margin-right: .75em;
201
+ font-size: .75em;
202
+ content: "";
203
+ transition: all 300ms;
204
+ }
205
+ }
206
+ }
207
+
208
+ .us-tab-content {
209
+ @extend %container;
210
+ display: block;
211
+ overflow: hidden;
212
+ opacity: 1;
213
+
214
+ .js & {
215
+ max-height: 0;
216
+
217
+ @include respond-to(tablet) {
218
+ display: none;
219
+ max-height: none;
220
+ }
221
+ }
222
+
223
+ .ie8.js & {
224
+ display: none;
225
+ max-height: none;
226
+ }
227
+
228
+ .us-tab.active & {
229
+ max-height: 9999px;
230
+ padding-top: 1em;
231
+
232
+ @include respond-to(tablet, true) {
233
+ display: block;
234
+ animation-duration: 1s;
235
+ animation-name: tab-show;
236
+ animation-fill-mode: forwards;
237
+ }
238
+ }
239
+ }
@@ -0,0 +1,244 @@
1
+ // @page Pattern Library/JavaScript
2
+ // @name Tooltip
3
+ //
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.
6
+ //
7
+ // @state .us-tooltip--top
8
+ // @state .us-tooltip--bottom
9
+ // @state .us-tooltip--left
10
+ // @state .us-tooltip--right
11
+ // @state .us-tooltip--small
12
+ //
13
+ // @javascript
14
+ // var tooltips = new ClassToggler({
15
+ // containerClass: '.us-tooltip',
16
+ // $target: $('.us-tooltip__icon'),
17
+ // activeClass: "us-tooltip--active"
18
+ // });
19
+ //
20
+ // @markup
21
+ // <div class="tooltip-demo us-tooltip {$modifiers}">
22
+ // <div class="us-field">
23
+ // <label for='name'>Name</label>
24
+ // <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>
25
+ // </div>
26
+ //
27
+ // <div class="us-tooltip__wrapper">
28
+ // <div class="us-tooltip__icon"></div>
29
+ // <div class="us-tooltip__note">
30
+ // <div class="us-tooltip__arrow"></div>
31
+ // <strong>Tooltip</strong> message content
32
+ // </div>
33
+ // </div>
34
+ // </div>
35
+
36
+ $tooltip-note-width: 300px !default;
37
+ $tooltip-icon-size: 22px !default;
38
+ $tooltip-icon-size--small: 16px !default;
39
+ $tooltip-icon-bg-color: $c-bordergrey !default;
40
+ $tooltip-icon-top-position: 0 !default;
41
+ $tooltip-icon-right-position: 0 !default;
42
+
43
+ $tooltip-note-padding-vertical: 1em !default;
44
+ $tooltip-note-padding-horizontal: .75em !default;
45
+ $tooltip-note-bg-color: #fff !default;
46
+ $tooltip-note-border-color: $c-typecyan !default;
47
+
48
+ $tooltip-arrow-width: 10px !default;
49
+ $tooltip-arrow-height: $tooltip-arrow-width * 2 !default;
50
+
51
+ $tooltip-hover: true !default;
52
+ $tooltip-active-class-breakpoint: to-tablet !default;
53
+ $tooltip-default-breakpoint: tablet !default;
54
+
55
+ $tooltip-h-positions: "top", "bottom";
56
+ $tooltip-v-positions: "left", "right";
57
+
58
+ @mixin tooltip-arrow($arrow-type, $arrow-width, $arrow-height, $arrow-position, $bottom-position) {
59
+ .us-tooltip__arrow {
60
+ @include respond-to($tooltip-default-breakpoint) {
61
+ @include arrow($arrow-width, $arrow-height, $arrow-type, $tooltip-note-border-color);
62
+ #{$arrow-position}: $bottom-position;
63
+
64
+ &:after {
65
+ @include arrow($arrow-width, $arrow-height, $arrow-type, $tooltip-note-bg-color);
66
+ #{$arrow-position}: 1px;
67
+ }
68
+ }
69
+ }
70
+ }
71
+
72
+ %tooltip-vertical-defaults {
73
+ @include respond-to($tooltip-default-breakpoint, true) {
74
+ top: -$tooltip-note-padding-vertical;
75
+
76
+ .us-tooltip__arrow {
77
+ top: $tooltip-note-padding-vertical;
78
+ }
79
+
80
+ .us-tooltip__arrow:after {
81
+ top: -$tooltip-arrow-width;
82
+ }
83
+ }
84
+ }
85
+
86
+ %tooltip-horizontal-defaults {
87
+ @include respond-to($tooltip-default-breakpoint, true) {
88
+ left: 50%;
89
+ margin-left: - ($tooltip-note-width / 2);
90
+
91
+ .us-tooltip__arrow,
92
+ .us-tooltip__arrow:after {
93
+ left: 50%;
94
+ margin-left: -$tooltip-arrow-height/2;
95
+ }
96
+ }
97
+ }
98
+
99
+ @mixin tooltip-position--horizontal($position, $icon-size: $tooltip-icon-size, $arrow-height: $tooltip-arrow-width, $arrow-width: $tooltip-arrow-height) {
100
+ $px-position: $icon-size + $arrow-height;
101
+ $bottom-position: -($arrow-width / 2);
102
+ $arrow-type: opposite-direction($position);
103
+ $arrow-position: opposite-direction($position);
104
+
105
+ @extend %tooltip-horizontal-defaults;
106
+ @include tooltip-arrow($arrow-type, $arrow-width, $arrow-height, $arrow-position, $bottom-position);
107
+ #{opposite-direction($position)}: $px-position;
108
+ }
109
+
110
+ @mixin tooltip-position--vertical($position, $icon-size: $tooltip-icon-size, $arrow-height: $tooltip-arrow-height, $arrow-width: $tooltip-arrow-width) {
111
+ $arrow-type: opposite-direction($position);
112
+ $arrow-position: $arrow-type;
113
+ $bottom-position: -($arrow-height / 2);
114
+ $px-position: -($tooltip-note-width + ($icon-size / 2)) - 4;
115
+
116
+ @extend %tooltip-vertical-defaults;
117
+ @include tooltip-arrow($arrow-type, $arrow-width, $arrow-height, $arrow-position, $bottom-position);
118
+ #{$position}: $px-position;
119
+ }
120
+
121
+ @mixin tooltip--active {
122
+ .us-tooltip__note {
123
+ display: block;
124
+ pointer-events: all;
125
+ opacity: 1;
126
+ visibility: visible;
127
+ transition-delay: 0ms;
128
+ }
129
+
130
+ .us-tooltip__icon {
131
+ background: $c-typecyan;
132
+ }
133
+ }
134
+
135
+ .us-tooltip {
136
+ &.us-tooltip--active {
137
+ @if $tooltip-active-class-breakpoint {
138
+ @include respond-to($tooltip-active-class-breakpoint) {
139
+ @include tooltip--active;
140
+ }
141
+ } @else {
142
+ @include tooltip--active;
143
+ }
144
+ }
145
+
146
+ @if $tooltip-hover {
147
+ &:hover {
148
+ @include respond-to($tooltip-default-breakpoint, true) {
149
+ @include tooltip--active;
150
+ }
151
+ }
152
+ }
153
+ }
154
+
155
+ .us-tooltip__wrapper {
156
+ position: static;
157
+ top: 0;
158
+ right: 0;
159
+
160
+ @include respond-to($tooltip-default-breakpoint, true) {
161
+ position: absolute;
162
+ }
163
+ }
164
+
165
+ .us-tooltip__icon {
166
+ position: absolute;
167
+ top: $tooltip-icon-top-position;
168
+ right: $tooltip-icon-right-position;
169
+ width: $tooltip-icon-size;
170
+ height: $tooltip-icon-size;
171
+ font-weight: 700;
172
+ line-height: $tooltip-icon-size;
173
+ color: #fff;
174
+ text-align: center;
175
+ cursor: pointer;
176
+ background: $tooltip-icon-bg-color;
177
+ border-radius: 50%;
178
+
179
+ @include respond-to($tooltip-default-breakpoint, true) {
180
+ position: static;
181
+ }
182
+
183
+ &:before {
184
+ content: "?";
185
+ }
186
+ }
187
+
188
+ .us-tooltip__note {
189
+ position: static;
190
+ display: none;
191
+ padding: $tooltip-note-padding-horizontal $tooltip-note-padding-vertical;
192
+ margin-top: 1em;
193
+ margin-bottom: 1em;
194
+ color: $c-typegrey;
195
+ background: $tooltip-note-bg-color;
196
+ border: 1px solid $tooltip-note-border-color;
197
+ border-radius: 4px;
198
+
199
+ @include respond-to($tooltip-default-breakpoint, true) {
200
+ position: absolute;
201
+ display: block;
202
+ width: $tooltip-note-width;
203
+ margin-top: 0;
204
+ margin-bottom: 0;
205
+ pointer-events: none;
206
+ opacity: 0;
207
+ visibility: hidden;
208
+ transition: visibility 0ms ease 300ms, opacity 300ms ease;
209
+ }
210
+ }
211
+
212
+ .us-tooltip__arrow {
213
+ position: absolute;
214
+
215
+ &:after {
216
+ position: absolute;
217
+ content: "";
218
+ }
219
+ }
220
+
221
+ .us-tooltip--small {
222
+ .us-tooltip__icon {
223
+ width: $tooltip-icon-size--small;
224
+ height: $tooltip-icon-size--small;
225
+ font-size: .875em;
226
+ line-height: $tooltip-icon-size--small;
227
+ }
228
+ }
229
+
230
+ @each $position in $tooltip-h-positions {
231
+ .us-tooltip--#{$position} {
232
+ .us-tooltip__note {
233
+ @include tooltip-position--horizontal($position);
234
+ }
235
+ }
236
+ }
237
+
238
+ @each $position in $tooltip-v-positions {
239
+ .us-tooltip--#{$position} {
240
+ .us-tooltip__note {
241
+ @include tooltip-position--vertical($position);
242
+ }
243
+ }
244
+ }
@@ -0,0 +1,69 @@
1
+ // @page Pattern Library/Components
2
+ // @name USPs
3
+ //
4
+ // @description
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
+ // General guidelines; There should only be one USP per deal. Text within USPs should be written in sentence case (not uppercase).
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
18
+ //
19
+ // @markup
20
+ // <div class='us-usp {$modifiers}'>Shortened USP</div>
21
+ // <div class='us-usp us-usp--annotated'>
22
+ // <div class='us-usp {$modifiers}'>Annotated USP</div>
23
+ // More information about USP goes here
24
+ // </div>
25
+
26
+ $variants: (
27
+ ('cyan', $c-cyan, $c-navy),
28
+ ('typecyan', $c-typecyan),
29
+ ('blue', $c-blue),
30
+ ('navy', $c-navy),
31
+ ('red', $c-red),
32
+ ('green', $c-green),
33
+ ('purple', $c-purple),
34
+ ('orange', $c-orange),
35
+ ('yellow', $c-yellow, $c-typegrey),
36
+ ('typegrey', $c-typegrey)
37
+ ) !default;
38
+
39
+ .us-usp {
40
+ display: inline-block;
41
+ padding: 0 10px;
42
+ font-weight: bold;
43
+ line-height: $base-line-ratio;
44
+ color: #fff;
45
+ text-align: center;
46
+ background-color: $c-typecyan;
47
+ }
48
+
49
+ @each $colour in $variants {
50
+ .us-usp--#{nth($colour, 1)} {
51
+ background-color: #{nth($colour, 2)};
52
+
53
+ @if length($colour) == 3 {
54
+ color: #{nth($colour, 3)};
55
+ }
56
+ }
57
+ }
58
+
59
+ .us-usp--annotated {
60
+ font-weight: normal;
61
+ color: $c-typegrey;
62
+ text-align: left;
63
+ background-color: $c-bggrey;
64
+
65
+ .us-usp {
66
+ margin-right: 10px;
67
+ margin-left: -10px;
68
+ }
69
+ }