ustyle 1.8.7 → 1.10.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +2 -2
- data/dist/ustyle-content.css +1 -1
- data/dist/ustyle-icons.css +1 -1
- data/dist/ustyle-latest.css +1 -1
- data/dist/ustyle.json +1 -1
- data/lib/ustyle/version.rb +1 -1
- data/package.json +2 -2
- data/styleguide/assets/sass/main.scss +1 -21
- data/styleguide/assets/sass/modules/_logo.scss +133 -9
- data/styleguide/content/brand/index.md +1 -1
- data/styleguide/content/brand/logo.tpl +207 -49
- data/styleguide/content/pattern-library/grid.tpl +6 -6
- data/styleguide/content/pattern-library/index.tpl +4 -4
- data/styleguide/partials/_header.tpl +32 -0
- data/vendor/assets/images/icons/uswitch.svg +1 -1
- data/vendor/assets/stylesheets/ustyle/articles/_base.scss +1 -1
- data/vendor/assets/stylesheets/ustyle/articles/_guide.scss +1 -1
- data/vendor/assets/stylesheets/ustyle/articles/_more.scss +1 -1
- data/vendor/assets/stylesheets/ustyle/articles/_related.scss +2 -2
- data/vendor/assets/stylesheets/ustyle/basics/_typography.scss +4 -4
- data/vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss +1 -3
- data/vendor/assets/stylesheets/ustyle/basics/variables/_icons.scss +8 -20
- data/vendor/assets/stylesheets/ustyle/components/_button.scss +12 -12
- data/vendor/assets/stylesheets/ustyle/components/_cta.scss +1 -1
- data/vendor/assets/stylesheets/ustyle/components/_featured.scss +4 -4
- data/vendor/assets/stylesheets/ustyle/components/_links.scss +5 -5
- data/vendor/assets/stylesheets/ustyle/components/_lists-li.scss +4 -2
- data/vendor/assets/stylesheets/ustyle/components/_lists.scss +1 -1
- data/vendor/assets/stylesheets/ustyle/components/_tooltip.scss +1 -1
- data/vendor/assets/stylesheets/ustyle/components/_usp.scss +11 -11
- data/vendor/assets/stylesheets/ustyle/forms/_fields.scss +3 -3
- data/vendor/assets/stylesheets/ustyle/forms/_input-group.scss +3 -3
- data/vendor/assets/stylesheets/ustyle/forms/_input.scss +5 -5
- data/vendor/assets/stylesheets/ustyle/forms/_radio-checkbox.scss +1 -1
- data/vendor/assets/stylesheets/ustyle/forms/_select.scss +4 -4
- data/vendor/assets/stylesheets/ustyle/forms/_textarea.scss +2 -2
- data/vendor/assets/stylesheets/ustyle/forms/_toggle.scss +3 -3
- data/vendor/assets/stylesheets/ustyle/forms/_validation.scss +2 -2
- data/vendor/assets/stylesheets/ustyle/icons/_base.scss +0 -20
- data/vendor/assets/stylesheets/ustyle/icons/_svg.scss +9 -5
- data/vendor/assets/stylesheets/ustyle/utilities/_general.scss +9 -9
- data/vendor/assets/stylesheets/ustyle/utilities/_images.scss +4 -4
- data/vendor/assets/stylesheets/ustyle/utilities/_spacing.scss +28 -28
- metadata +2 -82
- data/vendor/assets/images/icons/16px/angry.png +0 -0
- data/vendor/assets/images/icons/16px/apple.png +0 -0
- data/vendor/assets/images/icons/16px/arrow-up-left.png +0 -0
- data/vendor/assets/images/icons/16px/barchart.png +0 -0
- data/vendor/assets/images/icons/16px/blackberry.png +0 -0
- data/vendor/assets/images/icons/16px/controller.png +0 -0
- data/vendor/assets/images/icons/16px/desktop.png +0 -0
- data/vendor/assets/images/icons/16px/doc.png +0 -0
- data/vendor/assets/images/icons/16px/happy.png +0 -0
- data/vendor/assets/images/icons/16px/laptop.png +0 -0
- data/vendor/assets/images/icons/16px/magnify-out.png +0 -0
- data/vendor/assets/images/icons/16px/neutral.png +0 -0
- data/vendor/assets/images/icons/16px/power.png +0 -0
- data/vendor/assets/images/icons/16px/question.png +0 -0
- data/vendor/assets/images/icons/16px/sad.png +0 -0
- data/vendor/assets/images/icons/16px/tablet.png +0 -0
- data/vendor/assets/images/icons/16px/warning.png +0 -0
- data/vendor/assets/images/icons/16px/windows.png +0 -0
- data/vendor/assets/images/icons/16px/wondering.png +0 -0
- data/vendor/assets/images/icons/16px/world.png +0 -0
- data/vendor/assets/images/icons/32px/angry.png +0 -0
- data/vendor/assets/images/icons/32px/apple.png +0 -0
- data/vendor/assets/images/icons/32px/arrow-up-left.png +0 -0
- data/vendor/assets/images/icons/32px/barchart.png +0 -0
- data/vendor/assets/images/icons/32px/blackberry.png +0 -0
- data/vendor/assets/images/icons/32px/controller.png +0 -0
- data/vendor/assets/images/icons/32px/desktop.png +0 -0
- data/vendor/assets/images/icons/32px/doc.png +0 -0
- data/vendor/assets/images/icons/32px/happy.png +0 -0
- data/vendor/assets/images/icons/32px/laptop.png +0 -0
- data/vendor/assets/images/icons/32px/magnify-out.png +0 -0
- data/vendor/assets/images/icons/32px/neutral.png +0 -0
- data/vendor/assets/images/icons/32px/power.png +0 -0
- data/vendor/assets/images/icons/32px/question.png +0 -0
- data/vendor/assets/images/icons/32px/sad.png +0 -0
- data/vendor/assets/images/icons/32px/tablet.png +0 -0
- data/vendor/assets/images/icons/32px/warning.png +0 -0
- data/vendor/assets/images/icons/32px/windows.png +0 -0
- data/vendor/assets/images/icons/32px/wondering.png +0 -0
- data/vendor/assets/images/icons/32px/world.png +0 -0
- data/vendor/assets/images/icons/64px/angry.png +0 -0
- data/vendor/assets/images/icons/64px/apple.png +0 -0
- data/vendor/assets/images/icons/64px/arrow-up-left.png +0 -0
- data/vendor/assets/images/icons/64px/barchart.png +0 -0
- data/vendor/assets/images/icons/64px/blackberry.png +0 -0
- data/vendor/assets/images/icons/64px/controller.png +0 -0
- data/vendor/assets/images/icons/64px/desktop.png +0 -0
- data/vendor/assets/images/icons/64px/doc.png +0 -0
- data/vendor/assets/images/icons/64px/happy.png +0 -0
- data/vendor/assets/images/icons/64px/laptop.png +0 -0
- data/vendor/assets/images/icons/64px/magnify-out.png +0 -0
- data/vendor/assets/images/icons/64px/neutral.png +0 -0
- data/vendor/assets/images/icons/64px/power.png +0 -0
- data/vendor/assets/images/icons/64px/question.png +0 -0
- data/vendor/assets/images/icons/64px/sad.png +0 -0
- data/vendor/assets/images/icons/64px/tablet.png +0 -0
- data/vendor/assets/images/icons/64px/warning.png +0 -0
- data/vendor/assets/images/icons/64px/windows.png +0 -0
- data/vendor/assets/images/icons/64px/wondering.png +0 -0
- data/vendor/assets/images/icons/64px/world.png +0 -0
- data/vendor/assets/images/icons/angry.svg +0 -1
- data/vendor/assets/images/icons/apple.svg +0 -1
- data/vendor/assets/images/icons/arrow-up-left.svg +0 -1
- data/vendor/assets/images/icons/barchart.svg +0 -1
- data/vendor/assets/images/icons/blackberry.svg +0 -1
- data/vendor/assets/images/icons/controller.svg +0 -1
- data/vendor/assets/images/icons/desktop.svg +0 -1
- data/vendor/assets/images/icons/doc.svg +0 -1
- data/vendor/assets/images/icons/happy.svg +0 -1
- data/vendor/assets/images/icons/laptop.svg +0 -1
- data/vendor/assets/images/icons/magnify-out.svg +0 -1
- data/vendor/assets/images/icons/neutral.svg +0 -1
- data/vendor/assets/images/icons/power.svg +0 -1
- data/vendor/assets/images/icons/question.svg +0 -1
- data/vendor/assets/images/icons/sad.svg +0 -1
- data/vendor/assets/images/icons/tablet.svg +0 -1
- data/vendor/assets/images/icons/warning.svg +0 -1
- data/vendor/assets/images/icons/windows.svg +0 -1
- data/vendor/assets/images/icons/wondering.svg +0 -1
- 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="
|
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://
|
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://
|
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'>
|
@@ -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: #
|
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
|
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
|
6
|
-
// This featured deal won't make any assumptions around the media queries, it's up to you
|
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
|
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
|
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
|
-
// @
|
8
|
-
//
|
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 -
|
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.
|
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'>
|
@@ -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/
|
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
|
-
//
|
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
|
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
|
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
|
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">
|