reustyle 2.0.7

data/styleguide/assets/sass/modules/_sidebar.scss

@@ -0,0 +1,94 @@
+.sidebar {
+  z-index: 10;
+  display: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: $sidebar-bg-color;
+
+  @include respond-to($sidebar-breakpoint, true) {
+    position: fixed;
+    top: $header-height;
+    bottom: 0;
+    left: 0;
+    display: block;
+    width: $sidebar-width;
+    min-height: 1px;
+    padding-bottom: $gutter-width;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-right: 1px solid $c-bordergrey;
+
+    &--push {
+      padding-left: $sidebar-width + $gutter-width/2;
+    }
+  }
+
+  &--active {
+    display: block;
+  }
+
+  &__nav-link {
+    @include link-colors($c-navy, $c-typecyan, $c-navy, $c-navy);
+    position: relative;
+    display: block;
+    padding: 10px $gutter-width;
+
+    &:after {
+      float: right;
+      font-size: 8px;
+      color: $c-bordergrey;
+      content: "\25BA";
+    }
+
+    &:hover {
+      background-color: lighten($sidebar-bg-color, 5%);
+    }
+
+    &.active {
+      color: $c-blue-light;
+    }
+  }
+
+  &__nav-link--sub {
+    padding: 4px $gutter-width 4px $gutter-width*1.5;
+
+    @include respond-to(tablet, true) {
+      font-size: .875em;
+    }
+
+    &:after {
+      display: none;
+    }
+
+    &.active:before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      width: 5px;
+      background-color: $c-navy;
+      content: "";
+    }
+  }
+
+  &__nav {
+    padding-top: 4px;
+    padding-bottom: 4px;
+
+    &.active {
+      background-color: lighten($sidebar-bg-color, 3%);
+    }
+  }
+
+  &__sub-nav {
+    display: none;
+
+    .active & {
+      display: block;
+    }
+  }
+}
+
+.sidebar__nav.active .sidebar__nav-link:after {
+  content: "\25BC";
+}

data/styleguide/assets/sass/modules/_states.scss

@@ -0,0 +1,4 @@
+.state-us-link--light,
+.state-us-btn--reversed {
+  background: $c-navy;
+}

data/styleguide/assets/sass/modules/_styleguide.scss

@@ -0,0 +1,138 @@
+$styleguide-block-padding: $gutter-width*2;
+$styleguide-separator-color: $c-bggrey;
+$styleguide-block-border-color: $c-bordergrey;
+
+.styleguide {
+  &__hero {
+    padding: 2em $gutter-width / 2;
+    margin-right: - $gutter-width / 2;
+    margin-left: - $gutter-width/2;
+    color: #fff;
+    background-color: $c-navy;
+
+    @include respond-to($sidebar-breakpoint, true) {
+      padding: 2em $gutter-width/2;
+    }
+
+    @include respond-to(desktop, true) {
+      padding-left: $gutter-width;
+      margin-left: - $gutter-width/2;
+    }
+  }
+
+  &__hero-heading {
+    margin-bottom: 0;
+  }
+
+  &__block {
+    @extend %clearfix;
+    position: relative;
+    padding-bottom: $styleguide-block-padding / 1.5;
+    border-bottom: 1px solid $styleguide-separator-color;
+
+    + .styleguide__block {
+      padding-top: $styleguide-block-padding / 2;
+    }
+  }
+
+  &__header {
+    padding-top: $styleguide-block-padding/2;
+    padding-bottom: $styleguide-block-padding/2;
+
+    @include respond-to(tablet, true) {
+      padding-top: $styleguide-block-padding/2;
+    }
+  }
+
+  &__title {
+    margin-top: 1em;
+    margin-bottom: 1em;
+    color: $c-navy;
+  }
+
+  &__description {
+    color: $c-typegrey-2;
+
+    li p {
+      margin: 0;
+    }
+  }
+
+  &__content {
+    padding-top: $gutter-width;
+
+    @include respond-to(desktop, true) {
+      &--w-sidebar {
+        border-right: 1px solid $c-keylinegrey;
+      }
+    }
+  }
+
+  &__file-link {
+    @include link-colors($c-typegrey, $c-typecyan);
+    display: inline-block;
+    padding: 5px 8px;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.25;
+    text-decoration: none;
+    vertical-align: middle;
+    background-color: $c-bggrey;
+    border-radius: 2px;
+  }
+
+  &__block-title {
+    position: relative;
+    margin-bottom: $gutter-width/2;
+    color: $c-navy;
+  }
+
+  &__block-small-title {
+    padding: $gutter-width/2 $gutter-width/2 0 $gutter-width/2;
+    margin-bottom: 0;
+    font-size: 1.125em;
+    color: $c-typegrey-2;
+    text-transform: uppercase;
+  }
+
+  &__block-examples {
+    border: 1px solid $styleguide-block-border-color;
+    border-radius: 3px;
+  }
+
+  &__block-example {
+    @extend %clearfix;
+    position: relative;
+    padding: $gutter-width $gutter-width/2;
+
+    + &__block-example {
+      border-top: 1px dashed darken($styleguide-separator-color, 10%);
+    }
+  }
+
+  &__block-example-class {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    padding: 0 8px;
+    font-size: .85em;
+    color: $c-typegrey;
+    background-color: $c-bggrey;
+  }
+
+  &__block-states {
+    padding-left: 0;
+    margin-top: 0;
+    color: lighten($c-typegrey, 10%);
+    list-style: none;
+
+    li:before {
+      display: inline-block;
+      margin: 0 .35em;
+      font-size: 1.4em;
+      font-weight: normal;
+      color: $c-bordergrey;
+      content: "\203A";
+    }
+  }
+}

data/styleguide/assets/sass/modules/_table.scss

@@ -0,0 +1,3 @@
+.table__container {
+  overflow-x: scroll;
+}

data/styleguide/assets/sass/modules/_tooltip.scss

@@ -0,0 +1,9 @@
+.tooltip-demo {
+  position: relative;
+  padding: 1em;
+  border: 1px dashed $c-inputgrey;
+
+  @include respond-to(tablet, true) {
+    width: 50%;
+  }
+}

data/styleguide/assets/sass/modules/_typography.scss

@@ -0,0 +1,14 @@
+.font-chars {
+  margin-bottom: 2em;
+  font-size: 1.75em;
+  line-height: 2;
+  color: $c-typegrey-2;
+
+  &--bold {
+    @include bold-font;
+  }
+
+  &--italic {
+    @include italic-font;
+  }
+}

data/styleguide/assets/sass/modules/_version.scss

@@ -0,0 +1,11 @@
+.version {
+  display: inline-block;
+  padding: 3px;
+  margin-left: 10px;
+  font-size: .75em;
+  line-height: 1.4;
+  color: $c-typegrey-2;
+  vertical-align: middle;
+  background-color: $c-bggrey;
+  border-radius: 2px;
+}

data/styleguide/assets/sass/structure/_base.scss

@@ -0,0 +1,18 @@
+$container-width: 90%;
+
+html {
+  @include respond-to(mobile) {
+    font-size: $base-font-size * .875;
+  }
+}
+
+.container {
+  @extend %clearfix;
+  position: relative;
+  padding-right: $gutter-width / 2;
+  padding-left: $gutter-width / 2;
+}
+
+.content {
+  padding-top: $gutter-width;
+}

data/styleguide/assets/sass/structure/_header.scss

@@ -0,0 +1,12 @@
+.ustyle__header {
+  @extend %clearfix;
+  z-index: 15;
+  padding: .55em;
+
+  @include respond-to(tablet, true) {
+    position: fixed;
+    width: $sidebar-width;
+    padding: 1.45em .55em;
+    border-right: 1px solid $c-bordergrey;
+  }
+}

data/styleguide/assets/sass/vendor/_highlight.scss

@@ -0,0 +1,139 @@
+pre {
+  display: block;
+  padding: 1.5em;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-family: Consolas,"Liberation Mono", Menlo, Courier, monospace;
+  font-size: .9em;
+  line-height: 1.4;
+  color: $c-typegrey;
+  background: #fafafa;
+  border-top: 1px solid $c-bordergrey;
+
+  code {
+    display: inline;
+    margin: 0;
+    padding: 0;
+    max-width: initial;
+    overflow: initial;
+    line-height: inherit;
+    color: $c-typegrey;
+    word-wrap: normal;
+    background: none;
+    border: 0;
+  }
+}
+
+.hljs-comment,
+.hljs-template_comment,
+.diff .hljs-header,
+.hljs-javadoc {
+  color: #999988;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.javascript .hljs-title,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+  color: #333333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+  color: #009999;
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.tex .hljs-formula {
+  color: deeppink;
+}
+
+.hljs-title,
+.hljs-id,
+.coffeescript .hljs-params,
+.scss .hljs-preprocessor {
+  color: #990000;
+  font-weight: bold;
+}
+
+.javascript .hljs-title,
+.lisp .hljs-title,
+.clojure .hljs-title,
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-class .hljs-title,
+.haskell .hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+  color: #445588;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rules .hljs-property,
+.django .hljs-tag .hljs-keyword {
+  color: $c-blue;
+  font-weight: normal;
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body {
+  color: $c-typecyan;
+}
+
+.hljs-regexp {
+  color: #009926;
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+  color: #990073;
+}
+
+.hljs-built_in,
+.lisp .hljs-title,
+.clojure .hljs-built_in {
+  color: #0086b3;
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+  color: #999999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #ffdddd;
+}
+
+.hljs-addition {
+  background: #ddffdd;
+}
+
+.diff .hljs-change {
+  background: #0086b3;
+}
+
+.hljs-chunk {
+  color: #aaaaaa;
+}

data/styleguide/assets/sass/vendor/_pure-table.scss

@@ -0,0 +1,75 @@
+.pure-table {
+    /* Remove spacing between table cells (from Normalize.css) */
+    border-collapse: collapse;
+    border-spacing: 0;
+    empty-cells: show;
+    border: 1px solid #cbcbcb;
+}
+
+.pure-table caption {
+    color: #000;
+    font: italic 85%/1 arial, sans-serif;
+    padding: 1em 0;
+    text-align: center;
+}
+
+.pure-table td,
+.pure-table th {
+    border-left: 1px solid #cbcbcb;/*  inner column border */
+    border-width: 0 0 0 1px;
+    font-size: inherit;
+    margin: 0;
+    overflow: visible; /*to make ths where the title is really long work*/
+    padding: 0.5em 1em; /* cell padding */
+}
+
+/* Consider removing this next declaration block, as it causes problems when
+there's a rowspan on the first cell. Case added to the tests. issue#432 */
+.pure-table td:first-child,
+.pure-table th:first-child {
+    border-left-width: 0;
+}
+
+.pure-table thead {
+    background-color: #e0e0e0;
+    color: #000;
+    text-align: left;
+    vertical-align: bottom;
+}
+
+/*
+striping:
+   even - #fff (white)
+   odd  - #f2f2f2 (light gray)
+*/
+.pure-table td {
+    background-color: transparent;
+}
+.pure-table-odd td {
+    background-color: #f2f2f2;
+}
+
+/* nth-child selector for modern browsers */
+.pure-table-striped tr:nth-child(2n-1) td {
+    background-color: #f2f2f2;
+}
+
+/* BORDERED TABLES */
+.pure-table-bordered td {
+    border-bottom: 1px solid #cbcbcb;
+}
+.pure-table-bordered tbody > tr:last-child > td {
+    border-bottom-width: 0;
+}
+
+
+/* HORIZONTAL BORDERED TABLES */
+
+.pure-table-horizontal td,
+.pure-table-horizontal th {
+    border-width: 0 0 1px 0;
+    border-bottom: 1px solid #cbcbcb;
+}
+.pure-table-horizontal tbody > tr:last-child > td {
+    border-bottom-width: 0;
+}

data/styleguide/content/brand/index.md

@@ -0,0 +1,47 @@
+---
+name: Framework
+---
+
+## We believe in simplicity.
+
+That’s why we’ve made these guidelines really simple. They inform the way we look, feel, behave and sound as a company. They help ensure we remain consistent, impactful and recognisable across all of our communications.
+
+### Our values
+- Fairness
+- Knowledge
+- Clarity
+- Confidence
+- Possibilities
+
+### Our mission
+Using our expansive market knowledge and customer insight, we want to provide a simple, relevant service allowing customers to switch with minimal hassle.
+
+### Our ambition
+To be the UK’s leading comparison site for all consumers who wish to make their money go further.
+
+### Our vision
+We are the comparison service of choice – because we make it relevant, personal and simple to use for consumers and partners.
+
+### Our benefit
+We help our customers feel like life just keeps on switching for the better, allowing their time and money to be spent on what really matters.
+
+### Our personality
+- Expert
+- Frank
+- Connected
+- Human
+- Advisory
+
+## Brand positioning
+
+### Intuitive and focused
+We are connected to the individual needs of our customers. In fact, we work to understand them better than anyone. We use masses of customer data, constantly capturing more and more to continually improve the relevance of our advice. Add that to our commitment to ensure ours is the most simple and comprehensive switching service available, and our customers can find clarity in a confusing marketplace and build confidence in our brand.
+
+### Authoritative and directional
+We know what we’re talking about because we’re experts in what we do. We can demonstrate an unparalleled in-depth and connected understanding of our customers, the economy, household finances and the industries in which we operate. We’re always frank. We fight for what we believe is fair. And we do what we believe is right to build respect and trust.
+
+### Personal and engaging
+We are a human brand that talks to our customers, not preaches. We treat them like knowledgeable peers. Always consistent in our tone, look and customer experience across all touch points. To make things easy to understand, information is visualised and brought to life, enabling our customers to see how they can save money or get better value for money.
+
+### Experimental and bold
+We are pro-active, always adapting and pre-empting changes in customer mood and wider markets in which we exist. It lets our customers connect and interact with us with confidence.And we are proud of our BETA mindset. We stay agile, but we never look unpredictably experimental. Rather, we are open, current, honest, committed and consistent with our advice