3scale/porta

// library
Prefer single quoted strings
@import "provider/typography";
Prefer single quoted strings
@import "compass";
Prefer single quoted strings
@import "compass/reset";
Prefer single quoted strings
@import "font-awesome";
Prefer single quoted strings
@import "provider/logo";
Prefer single quoted strings
@import "compass/css3/box-sizing";
 
 
 
// typography
@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}
 
@mixin font-size($size) {
  font-size: $size;
Property `font-size` already defined on line 18
  font-size: calculateRem($size);
}
 
//sizes
$font-size-x-small: 12px;
$font-size-small: 14px;
$font-size: 16px;
$font-size-large: 18px;
$font-size-x-large: 24px;
$font-size-xx-large: 32px;
$font-size-xxx-large: 48px;
 
// line height
$line-height: $font-size * 1.5;
 
//weights
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 600;
 
//families
$font-family-text: $font-family-base;
 
// colors
$color-grey-1: $font-color;
$color-grey-2: $label-color;
$color-grey-3: $disabled-color;
$color-grey-4: $border-color;
$color-success: $success-color;
$success-color: $color-success;
$color-failure: $error-color;
$error-color: $color-failure;
$color-disabled: $color-grey-3;
 
//
$color-text-primary: $color-grey-1;
$color-text-secondary: $color-grey-2;
$color-text-tertiary: $color-grey-3;
 
$color-border: $color-grey-4;
$color-brand-primary: $brand-orange;
$color-brand-secondary: $highlight-color; // blue
$color-link: $color-brand-secondary;
$color-link-hover: $color-text-primary;
 
// vertical rythm
$base-font-size: $font-size;
$base-line-height: $line-height;
$default-rhythm-border-width: 2px;
Prefer single quoted strings
$rhythm-unit: "rem";
$rem-with-px-fallback: true;
 
Prefer single quoted strings
@import "provider/flash";
 
Avoid using id selectors
#flashWrapper {
  @include leader(1);
}
 
// elements
 
html {
  @include box-sizing(border-box);
Properties should be ordered color, font-family, font-size, line-height
  font-family: $font-family-text;
  font-size: adjust-font-size-to($font-size);
  line-height: $line-height;
  color: $color-text-primary;
Expected item on line 85 to appear before line 81. Rule sets should be ordered as follows: `@extends`, `@includes` without `@content`, properties, `@includes` with `@content`, nested rule sets
  @include establish-baseline;
  //@include debug-vertical-alignment;
}
 
body {
  text-align: center;
}
 
hr {
  @include box-sizing(border-box);
Properties should be ordered border, border-bottom, height, margin
  height: 24px;
Shorthand form for property `margin` should be written more concisely as `0` instead of `0 0 0 0`
  margin: 0 0 0 0;
`border: 0` is preferred over `border: none`
  border: none;
  border-bottom: 1px solid $color-border;
}
 
strong {
  font-weight: $font-weight-bold;
}
 
Each selector in a comma sequence should be on its own single line
header, main {
  margin: 0 auto;
Properties should be ordered margin, max-width, min-width, position, text-align
  text-align: left;
  max-width: 50em;
  min-width: 20em;
  position: relative;
}
 
Each selector in a comma sequence should be on its own single line
a, .link {
  color: $color-link;
  cursor: pointer;
 
  &:hover {
    color: $color-link-hover;
  }
}
header {
  @include leader(1);
  @include trailer(2);
}
 
h1 {
  @include adjust-font-size-to($font-size-x-large);
  font-weight: $font-weight-normal;
Expected item on line 129 to appear before line 128. Rule sets should be ordered as follows: `@extends`, `@includes` without `@content`, properties, `@includes` with `@content`, nested rule sets
  @include trailer(1);
}
 
p {
  @include leader(0);
  @include trailer(1);
}
 
Merge rule `h1 + p` with rule on line 126
h1 + p {
  @include leader(-1);
}
 
.wizard-close {
Properties should be ordered color, line-height, position, right, top, z-index
  position: absolute;
  top: 0;
  right: 0;
  z-index: 30;
Expected item on line 146 to appear before line 142. Rule sets should be ordered as follows: `@extends`, `@includes` without `@content`, properties, `@includes` with `@content`, nested rule sets
  @include adjust-font-size-to($font-size-xx-large);
  line-height: 0;
  color: $color-border;
}
 
.success {
  color: $color-success;
}
 
.failure {
Declaration should be terminated by a semicolon
  color: $color-failure
}
 
// button
$button-color-border: $color-brand-secondary;
$button-color: $button-color-border;
$button-color-hover: white;
 
.button {
  @include box-sizing(border-box);
  @include leader(1);
  @include trailer(1);
Properties should be ordered background-color, border-color, color, cursor, float, font-size, line-height, text-decoration
  text-decoration: none;
  color: $button-color;
  line-height: 0;
Expected item on line 171 to appear before line 168. Rule sets should be ordered as follows: `@extends`, `@includes` without `@content`, properties, `@includes` with `@content`, nested rule sets
  @include border-radius(6px);
  float: right;
Color literals like `white` should only be used in variable declarations; they should be referred to via variable everywhere else.
  background-color: white;
  cursor: pointer;
  font-size: $font-size;
  @include rhythm-borders;
  border-color: $button-color-border;
 
  &:hover {
    background-color: $button-color-border;
    color: $button-color-hover;
  }
}
 
Begin pseudo elements with double colons: `::`
.button--next:after {
Prefer single quoted strings
  content: " ›";
}
 
.button[disabled] {
Properties should be ordered border-color, color
  color: $color-disabled;
  border-color: $color-disabled;
 
Begin pseudo elements with double colons: `::`
  &:after {
    content: normal;
  }
 
  &:hover {
    background-color: $button-color-hover;
  }
}
 
// button nudge animation
@include keyframes(button-nudge) {
  0%, 100% {
    background-color: $button-color-hover;
    color: $button-color;
  }
 
  50% {
    background-color: $button-color-border;
    color: $button-color-hover;
  }
}
 
 
input {
  outline: none;
}
 
input[type="text"] {
  @include input-placeholder {
    color: $color-text-tertiary;
    font-style: italic;
    height: 1.5rem;
 
Begin pseudo elements with double colons: `::`
    &:before {
Declaration should be terminated by a semicolon
      content: 'e.g. '
    }
  }
}
 
 
 
Merge rule `input[type="text"]` with rule on line 220
input[type="text"] {
  @include box-sizing(border-box);
Properties should be ordered background-color, border, border-color, color, float, font-size, height, padding, text-decoration, width
  text-decoration: none;
  color: $button-color;
  //line-height: 24px;
  height: 3.125rem;
  //@include border-radius(6px);
  float: right;
Color literals like `white` should only be used in variable declarations; they should be referred to via variable everywhere else.
  background-color: white;
  font-size: $font-size;
`border: 0` is preferred over `border: none`
  border: none;
Expected item on line 245 to appear before line 236. Rule sets should be ordered as follows: `@extends`, `@includes` without `@content`, properties, `@includes` with `@content`, nested rule sets
  @include padding-leader;
  @include trailing-border;
Shorthand form for property `padding` should be written more concisely as `0` instead of `0 0 0 0`
  padding: 0 0 0 0;
  border-color: $color-border;
  width: 60%;
 
  &:hover {
    border-color: $color-text-tertiary;
  }
 
  &:focus {
    border-color: $color-brand-secondary;
  }
 
  //border-color: $button-color-border;
 
}
 
.error input {
  border-color: $color-failure;
}
 
.inline-errors {
Properties should be ordered color, float, font-style, width
  float: right;
  width: 60%;
  color: $color-failure;
  font-style: italic;
}
 
form li {
Properties should be ordered clear, display, float, width
  display: block;
  width: 100%;
  float: left;
  clear: both;
Expected item on line 279 to appear before line 275. Rule sets should be ordered as follows: `@extends`, `@includes` without `@content`, properties, `@includes` with `@content`, nested rule sets
  @include trailer(1);
 
 
  &.slim {
    display: inline;
Expected item on line 284 to appear before line 283. Rule sets should be ordered as follows: `@extends`, `@includes` without `@content`, properties, `@includes` with `@content`, nested rule sets
`0.5` should be written without a leading zero as `.5`
    @include trailer(-0.5);
    max-width: 80%;
 
    label {
Properties should be ordered padding-left, text-align, width
      text-align: left;
      width: auto;
      padding-left: 0;
    }
 
    input {
      float: left;
    }
  }
 
 
  &.hidden { display: none; }
 
}
 
fieldset {
`border: 0` is preferred over `border: none`
  border: none;
 
  &:hover {
    color: $color-text-primary;
  }
}
 
label {
  @include box-sizing(border-box);
Properties should be ordered border-color, display, float, height, line-height, text-align, width
  display: block;
  width: 40%;
  float: left;
  text-align: right;
  line-height: 0;
  height: $line-height;
Expected item on line 319 to appear before line 313. Rule sets should be ordered as follows: `@extends`, `@includes` without `@content`, properties, `@includes` with `@content`, nested rule sets
  @include rhythm-borders;
  border-color: transparent;
}
 
 
.fa-ul {
  margin-left: 0;
}
 
// logo
.logo-3scale {
Properties should be ordered float, margin, padding
Shorthand form for property `margin` should be written more concisely as `0` instead of `0 0 0 0`
  margin: 0 0 0 0;
Shorthand form for property `padding` should be written more concisely as `0` instead of `0 0 0 0`
  padding: 0 0 0 0;
  float: none;
}
 
.logo-3scale--svg {
  height: $line-height * 1.5;
}
 
.explain {
  @include leader;
 
  .text {
`0.5` should be written without a leading zero as `.5`
    @include padding-leader(0.5);
  }
 
 
  .text--down {
    @include padding-leader(1);
  }
 
  .text--up {
    @include padding-leader(0);
  }
 
  .is-transparent {
    @include opacity(0);
  }
 
  .explain__step--1 {
    @include animation( focus 1s ease-out 1s forwards,
                        focus_border 1s ease-out 1s forwards,
                        unfocus 1s ease-out 5s forwards,
                        unfocus_border 1s ease-out 5s forwards,
                        success 1s ease-out 15s forwards,
                        success_border 1s ease-out 15s forwards );
 
    .icon {
      @include animation( focus 1s ease-out 1s forwards,
                          unfocus 1s ease-out 5s forwards,
                          success 1s ease-out 15s forwards );
    }
 
    .text {
Expected 0 spaces after `(` instead of ` `
Expected 0 spaces before `)` instead of ` `
      @include animation( reveal 1s ease-out 1s forwards );
    }
 
    .code-example {
Expected 0 spaces before `)` instead of ` `
Expected 0 spaces after `(` instead of ` `
      @include animation( reveal 1s ease-out 1s forwards );
 
Selector should have depth of applicability no greater than 3, but was 4
      * {
Expected 0 spaces after `(` instead of ` `
Expected 0 spaces before `)` instead of ` `
        @include animation( unfocus 1s ease-out 5s forwards );
      }
 
      &:hover {
Selector should have depth of applicability no greater than 3, but was 4
        * {
`0.2` should be written without a leading zero as `.2`
Expected 0 spaces after `(` instead of ` `
Expected 0 spaces before `)` instead of ` `
          @include animation( clean 0.2s ease-out 0 forwards );
        }
      }
    }
  }
 
  .explain__step--2 {
    @include animation( focus 1s ease-out 5s forwards,
                        focus_border 1s ease-out 5s forwards,
                        unfocus 1s ease-out 10s forwards,
                        unfocus_border 1s ease-out 10s forwards,
                        success 1s ease-out 15s forwards,
                        success_border 1s ease-out 15s forwards );
 
    .icon {
      @include animation( focus 1s ease-out 5s forwards,
                          unfocus 1s ease-out 10s forwards,
                          success 1s ease-out 15s forwards );
    }
 
    .text {
Expected 0 spaces after `(` instead of ` `
Expected 0 spaces before `)` instead of ` `
      @include animation( reveal 1s ease-out 5s forwards );
    }
 
    .code-example {
Expected 0 spaces after `(` instead of ` `
Expected 0 spaces before `)` instead of ` `
      @include animation( reveal 1s ease-out 5s forwards );
 
Selector should have depth of applicability no greater than 3, but was 4
      * {
Expected 0 spaces after `(` instead of ` `
Expected 0 spaces before `)` instead of ` `
        @include animation( unfocus 1s ease-out 10s forwards );
      }
 
      &:hover {
Selector should have depth of applicability no greater than 3, but was 4
        * {
`0.2` should be written without a leading zero as `.2`
Expected 0 spaces before `)` instead of ` `
Expected 0 spaces after `(` instead of ` `
          @include animation( clean 0.2s ease-out 0 forwards );
        }
      }
    }
  }
 
  .explain__step--3 {
    @include animation( focus 1s ease-out 10s forwards,
                        unfocus 1s ease-out 15s forwards,
                        success 1s ease-out 15s forwards );
 
    .icon {
      @include animation( focus 1s ease-out 10s forwards,
                          unfocus 1s ease-out 15s forwards,
                          success 1s ease-out 15s forwards );
    }
 
    .text {
Expected 0 spaces before `)` instead of ` `
Expected 0 spaces after `(` instead of ` `
      @include animation( reveal 1s ease-out 10s forwards );
    }
  }
}
 
 
 
// Block: code example
 
// colors
$code-color-base: $color-success;
$code-color-path: $color-brand-secondary;
$code-color-params: $color-brand-primary;
 
.code-example {
Properties should be ordered color, display
  display: block;
Expected item on line 453 to appear before line 452. Rule sets should be ordered as follows: `@extends`, `@includes` without `@content`, properties, `@includes` with `@content`, nested rule sets
  @include adjust-font-size-to(14px);
  color: $color-text-secondary;
 
  .code-example__base {
    color: $code-color-base;
  }
 
  .code-example__path {
    color: $code-color-path;
  }
 
  .code-example__params {
    color: $code-color-params;
 
Begin pseudo elements with double colons: `::`
    &:before {
Properties should be ordered color, content
      content: '?';
      color: $color-text-secondary;
    }
  }
 
Begin pseudo elements with double colons: `::`
  .code-example--slash:after {
Properties should be ordered color, content
    content: '/';
    color: $color-brand-secondary;
  }
 
Begin pseudo elements with double colons: `::`
  .feedback--inactive .code-example--slash:after {
    color: $color-text-secondary;
  }
Line contains trailing whitespace
 
  .code-example--optional {
 
Begin pseudo elements with double colons: `::`
    &:before {
Properties should be ordered color, content
      content: '(';
      color: $color-text-secondary;
    }
 
Begin pseudo elements with double colons: `::`
    &:after {
Properties should be ordered color, content
      content: ')';
      color: $color-text-secondary;
    }
  }
 
Merge rule `.code-example__params.code-example--optional` with rule on line 464
  .code-example__params.code-example--optional {
Begin pseudo elements with double colons: `::`
    &:before {
      content: '(?';
    }
  }
}
 
 
$feedback-color-active: $color-brand-secondary;
$feedback-color-success: $color-success;
$feedback-color-failure: $color-failure;
$feedback-color-inactive: $color-text-secondary;
 
 
.feedback {
Properties should be ordered border-color, border-left, margin-left, min-height, padding-left
  border-left: 5px solid transparent;
  padding-left: 72px;
  margin-left: 24px;
  border-color: transparent;
  //position: relative;
Expected item on line 515 to appear before line 510. Rule sets should be ordered as follows: `@extends`, `@includes` without `@content`, properties, `@includes` with `@content`, nested rule sets
  @include padding-trailer(3);
  min-height: $line-height * 2;
  @include adjust-font-size-to($font-size-large);
 
  .code-example {
    //position: absolute;
    //top: $line-height * 3;
    //@include padding-leader(6);
    //margin-left: $line-height * -2;
    //@extend %vertical-align;
 
Properties should be ordered left, position, top
    position: relative;
    top: $line-height * 2;
    left: $line-height * -2;
  }
 
  &.feedback--connect {
    padding-bottom: 0;
  }
 
  &.feedback--sec {
    @include padding-trailer(0);
    min-height: auto;
  }
 
  &.feedback--success {
Declaration should be terminated by a semicolon
    border-color: $feedback-color-success
  }
 
  &.feedback--failure {
    border-color: $feedback-color-failure;
  }
 
  &.feedback--active {
    border-color: $feedback-color-active;
  }
 
  &.feedback--inactive {
    border-color: $feedback-color-inactive;
  }
 
 
  .icon {
    color: $color-text-secondary;
  }
 
  .icon--sec {
    color: $color-text-primary;
  }
  .icon--focus {
    color: $feedback-color-active;
    //margin-top: 0 !important;
  }
 
  .icon--success {
    color: $feedback-color-success;
  }
 
  .icon--failure {
    color: $feedback-color-failure;
  }
 
Unnecessary parent selector (&)
  &>[class*="fa-li"] {
Properties should be ordered background-color, font-size, margin-left, margin-top, padding, width
    font-size: 40px;
Color literals like `white` should only be used in variable declarations; they should be referred to via variable everywhere else.
    background-color: white;
 
    //margin-left: -60px;
 
    margin-left: 59px;
Shorthand form for property `padding` should be written more concisely as `4px 0` instead of `4px 0 4px 0`
    padding: 4px 0 4px 0;
    /* margin-right: 10px; */
    margin-top: -6px;
    width: 48px;
  }
 
  .fa-mobile {
    font-size: 64px;
    margin-left: 111px;
    margin-top: -9px;
    //margin-left: -57px;
  }
 
Empty rule
  .fa-hdd-o {
  }
 
  .fa-puzzle-piece {
    text-indent: 10px;
  }
 
 
}
 
 
// reveal animation
@include keyframes(reveal) {
  0%, 100% {
    visibility: visible;
Expected item on line 612 to appear before line 611. Rule sets should be ordered as follows: `@extends`, `@includes` without `@content`, properties, `@includes` with `@content`, nested rule sets
    @include opacity(1);
  }
}
 
// focus animation
@include keyframes(focus) {
  0%, 100% {
    color: $color-brand-secondary;
  }
}
 
// unfocus animation
@include keyframes(unfocus) {
  0%, 100% {
    color: $color-text-secondary;
  }
}
 
// focus border animation
@include keyframes(focus_border) {
  0%, 100% {
    border-color: $color-brand-secondary;
  }
}
 
// unfocus border animation
@include keyframes(unfocus_border) {
  0%, 100% {
    border-color: $color-text-secondary;
  }
}
 
// success animation
@include keyframes(success) {
  0%, 100% {
    color: $color-success;
  }
}
 
// success border animation
@include keyframes(success_border) {
  0%, 100% {
    border-color: $color-success;
  }
}
 
// clean animation
@include keyframes(clean) {
  0%, 100% {
    color: auto;
  }
}
 
//icons grey
//blue icon + text: step-1
//blue to grey: step-1
//blue icon + text: step-2
//blue to grey: step-2
//blue icon + text: step-3
//all to green
 
 
.response {
Properties should be ordered display, max-height, overflow-y
  overflow-y: auto;
  max-height: $base-line-height * 20;
  display: block;
}
 
.is-hidden {
  display: none;
}