Add styles from template

.editorconfig

@@ -19,7 +19,8 @@ insert_final_newline = true
 trim_trailing_whitespace = false
 
 [*.{scss}]
-indent_style = tab
+indent_style = space
+indent_size = 2
 
 [*.{js,jsx,json,html}]
 indent_style = space

.scss-lint.yml

-# sass-lint config generated by make-sass-lint-config v0.1.1
-#
-# The following scss-lint Linters are not yet supported by sass-lint:
-# DisableLinterReason, ElsePlacement, PropertyCount, SelectorDepth
-# SpaceAroundOperator, TrailingWhitespace, UnnecessaryParentReference, Compass::*
-#
-# The following settings/values are unsupported by sass-lint:
-# Linter Indentation, option "allow_non_nested_indentation"
-# Linter Indentation, option "character"
-# Linter NestingDepth, option "ignore_parent_selectors"
-# Linter PropertySortOrder, option "min_properties"
-# Linter PropertySortOrder, option "separate_groups"
-# Linter SpaceBeforeBrace, option "allow_single_line_padding"
-# Linter VendorPrefix, option "identifier_list"
-
-files:
-  include: '**/*.scss'
-options:
-  formatter: stylish
-  merge-default-rules: false
-rules:
-  bem-depth:
-    - 1
-    - max-depth: 3
-  border-zero:
-    - 1
-    - convention: none
-  brace-style:
-    - 2
-    - allow-single-line: true
-  class-name-format:
-    - 1
-    - convention: hyphenatedbem
-  clean-import-paths:
-    - 1
-    - filename-extension: false
-      leading-underscore: false
-  empty-line-between-blocks:
-    - 2
-    - ignore-single-line-rulesets: true
-  extends-before-declarations: 1
-  extends-before-mixins: 1
-  final-newline:
-    - 1
-    - include: true
-  force-attribute-nesting: 1
-  force-element-nesting: 1
-  force-pseudo-nesting: 1
-  function-name-format:
-    - 1
-    - allow-leading-underscore: true
-      convention: hyphenatedlowercase
-  hex-length:
-    - 1
-    - style: short
-  hex-notation:
-    - 1
-    - style: lowercase
-  id-name-format:
-    - 1
-    - convention: hyphenatedbem
-  indentation:
-    - 2
-    - size: 4
-  leading-zero:
-    - 1
-    - include: false
-  mixin-name-format:
-    - 0
-    - allow-leading-underscore: true
-      convention: hyphenatedlowercase
-  mixins-before-declarations: 1
-  nesting-depth:
-    - 1
-    - max-depth: 4
-  no-color-keyword: 1
-  no-color-literals: 1
-  no-css-comments: 1
-  no-debug: 1
-  no-duplicate-properties: 1
-  no-empty-rulesets: 1
-  no-extends: 0
-  no-ids: 1
-  no-important: 1
-  no-invalid-hex: 1
-  no-mergeable-selectors: 1
-  no-misspelled-properties:
-    - 1
-    - extra-properties: ['overflow-scrolling', 'font-smoothing']
-  no-qualifying-elements:
-    - 1
-    - allow-element-with-attribute: false
-      allow-element-with-class: false
-      allow-element-with-id: false
-  no-trailing-zero: 1
-  no-transition-all: 0
-  no-url-protocols: 1
-  no-vendor-prefixes:
-    - 1
-    - additional-identifiers: []
-      excluded-identifiers: []
-  placeholder-in-extend: 1
-  placeholder-name-format:
-    - 1
-    - convention: hyphenatedlowercase
-  property-sort-order:
-    - 1
-    - ignore-custom-properties: false
-  property-units:
-    - 1
-    - global:
-        - ch
-        - em
-        - ex
-        - rem
-        - cm
-        - in
-        - mm
-        - pc
-        - pt
-        - px
-        - q
-        - vh
-        - vw
-        - vmin
-        - vmax
-        - deg
-        - grad
-        - rad
-        - turn
-        - ms
-        - s
-        - Hz
-        - kHz
-        - dpi
-        - dpcm
-        - dppx
-        - '%'
-      per-property: {}
-  quotes:
-    - 1
-    - style: single
-  shorthand-values:
-    - 1
-    - allowed-shorthands:
-        - 1
-        - 2
-        - 3
-  single-line-per-selector: 2
-  space-after-bang:
-    - 2
-    - include: false
-  space-after-colon:
-    - 2
-    - include: true
-  space-after-comma:
-    - 1
-    - include: true
-  space-before-bang:
-    - 2
-    - include: true
-  space-before-brace:
-    - 2
-    - include: true
-  space-before-colon: 1
-  space-between-parens:
-    - 2
-    - include: false
-  trailing-semicolon: 2
-  url-quotes: 1
-  variable-for-property:
-    - 0
-    - properties: []
-  variable-name-format:
-    - 1
-    - allow-leading-underscore: true
-      convention: hyphenatedlowercase
-  zero-unit: 1
+# Default application configuration that all configurations inherit from.
+
+scss_files: "**/*.scss"
+plugin_directories: ['.scss-linters']
+
+# List of gem names to load custom linters from (make sure they are already
+# installed)
+plugin_gems: []
+
+# Default severity of all linters.
+severity: warning
+
+linters:
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BemDepth:
+    enabled: false
+    max_elements: 1
+
+  BorderZero:
+    enabled: true
+    convention: zero # or `none`
+
+  ChainedClasses:
+    enabled: false
+
+  ColorKeyword:
+    enabled: true
+
+  ColorVariable:
+    enabled: true
+
+  Comment:
+    enabled: true
+    style: silent
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DisableLinterReason:
+    enabled: false
+
+  DuplicateProperty:
+    enabled: true
+
+  ElsePlacement:
+    enabled: true
+    style: same_line # or 'new_line'
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: true
+
+  EmptyRule:
+    enabled: true
+
+  ExtendDirective:
+    enabled: false
+
+  FinalNewline:
+    enabled: true
+    present: true
+
+  HexLength:
+    enabled: true
+    style: short # or 'long'
+
+  HexNotation:
+    enabled: true
+    style: lowercase # or 'uppercase'
+
+  HexValidation:
+    enabled: true
+
+  IdSelector:
+    enabled: false
+
+  ImportantRule:
+    enabled: true
+
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: true
+    allow_non_nested_indentation: false
+    character: space # or 'tab'
+    width: 2
+
+  LeadingZero:
+    enabled: true
+    style: exclude_zero # or 'include_zero'
+
+  MergeableSelector:
+    enabled: true
+    force_nesting: true
+
+  NameFormat:
+    enabled: true
+    allow_leading_underscore: true
+    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
+
+  NestingDepth:
+    enabled: true
+    max_depth: 5
+    ignore_parent_selectors: false
+
+  PlaceholderInExtend:
+    enabled: true
+
+  PrivateNamingConvention:
+    enabled: false
+    prefix: _
+
+  PropertyCount:
+    enabled: false
+    include_nested: false
+    max_properties: 10
+
+  PropertySortOrder:
+    enabled: true
+    ignore_unspecified: false
+    min_properties: 2
+    separate_groups: false
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+    disabled_properties: []
+
+  PropertyUnits:
+    enabled: true
+    global: [
+      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
+      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
+      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
+      'deg', 'grad', 'rad', 'turn',            # Angle
+      'ms', 's',                               # Duration
+      'Hz', 'kHz',                             # Frequency
+      'dpi', 'dpcm', 'dppx',                   # Resolution
+      '%']                                     # Other
+    properties: {}
+
+  PseudoElement:
+    enabled: true
+
+  QualifyingElement:
+    enabled: true
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 5
+
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
+
+  Shorthand:
+    enabled: true
+    allowed_shorthands: [1, 2, 3]
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: true
+
+  SingleLinePerSelector:
+    enabled: true
+
+  SpaceAfterComma:
+    enabled: true
+    style: one_space # or 'no_space', or 'at_least_one_space'
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceAfterVariableColon:
+    enabled: false
+    style: one_space # or 'no_space', 'at_least_one_space' or 'one_space_or_newline'
+
+  SpaceAfterVariableName:
+    enabled: true
+
+  SpaceAroundOperator:
+    enabled: true
+    style: one_space # or 'at_least_one_space', or 'no_space'
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space # or 'new_line'
+    allow_single_line_padding: false
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+
+  StringQuotes:
+    enabled: true
+    style: single_quotes # or double_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingWhitespace:
+    enabled: true
+
+  TrailingZero:
+    enabled: false
+
+  TransitionAll:
+    enabled: false
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: true
+
+  UrlQuotes:
+    enabled: true
+
+  VariableForProperty:
+    enabled: false
+    properties: []
+
+  VendorPrefix:
+    enabled: true
+    identifier_list: base
+    additional_identifiers: []
+    excluded_identifiers: []
+
+  ZeroUnit:
+    enabled: true
+
+  Compass::*:
+    enabled: false

Makefile

@@ -18,8 +18,6 @@ install: package.json
 
 	@npm install
 
-	@touch $@
-
 build: | install test
 	@echo Building ZBox Manager Webapp
 

src/sass/components/_alerts.scss

+.sweet-alert {
+  box-shadow: 0 0 1px $black-opacity-p1, 0 2px 4px $black-opacity-p2;
+  padding: 25px;
+
+  p {
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  h2 {
+    font-size: 26px;
+  }
+
+  button {
+    background-color: $sweet-alert-btn-color;
+    border: 0;
+    border-radius: 5px;
+    box-shadow: none;
+    color: $white;
+    cursor: pointer;
+    font-size: 17px;
+    font-weight: 500;
+    margin: 26px 5px 0;
+    padding: 10px 32px;
+
+    &:focus {
+      box-shadow: 0 0 2px $sweet-alert-btn-rgba-focus-p1, inset 0 0 0 1px $sweet-alert-btn-rgba-focus-p2;
+      outline: none;
+    }
+
+    &:hover {
+      background-color: $sweet-alert-btn-color-hover;
+    }
+
+    &:active {
+      background-color: $sweet-alert-btn-color-active;
+    }
+
+    &.cancel {
+      background-color: $sweet-alert-btn-cancel;
+    }
+
+    &.cancel:hover {
+      background-color: $sweet-alert-btn-cancel-hover;
+    }
+
+    &.cancel:active {
+      background-color: $sweet-alert-btn-cancel-active;
+    }
+  }
+}
+
+.table {
+  thead {
+    border-bottom: 1px solid $table-children-border-bottom-color;
+  }
+
+  tr {
+    border-bottom: 1px solid $table-children-border-bottom-color;
+  }
+
+  th {
+    border-bottom: 1px solid $table-children-border-bottom-color;
+  }
+}
+
+.cg-notify-message {
+  &.homer-notify {
+    background: $white;
+    border: 0;
+    box-shadow: 0 0 1px $black-opacity-p1, 0 2px 4px $black-opacity-p2;
+    color: inherit;
+    margin-top: 30px;
+    padding: 0;
+
+    &.alert-warning {
+      border-left: 6px solid $color-yellow;
+    }
+
+    &.alert-success {
+      border-left: 6px solid $color-green;
+    }
+
+    &.alert-danger {
+      border-left: 6px solid $color-red-deep;
+    }
+
+    &.alert-info {
+      border-left: 6px solid $color-blue;
+    }
+  }
+}

src/sass/components/_contact.scss

+.contact-panel {
+  h3 {
+    margin-bottom: 2px;
+  }
+
+  a {
+    color: inherit;
+  }
+
+  p {
+    font-size: 11px;
+    line-height: 16px;
+    margin-bottom: 0;
+  }
+
+  img {
+    height: 76px;
+    width: 76px;
+  }
+
+  &:hover .panel-body {
+    animation-duration: .5s;
+    animation-fill-mode: both;
+    animation-name: pulse;
+    z-index: 1;
+  }
+}
+
+.contact-footer {
+  padding: 0 15px;
+}
+
+.contact-stat {
+  padding: 8px 0;
+  text-align: center;
+
+  span {
+    color: lighten($color-text, 20%);
+    display: block;
+    font-size: 10px;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+}

src/sass/components/_dropdown.scss

+.dropdown-menu {
+  &.hdropdown {
+    padding: 0;
+    z-index: 1060;
+
+    &.title {
+      border-bottom: 1px solid $border-color;
+      padding: 12px;
+      text-align: center;
+    }
+
+    li {
+      background: lighten($color-background, 3%);
+      border-bottom: 1px solid $border-color;
+      padding: 6px 12px;
+      text-align: left;
+
+      &.summary {
+        background: $white;
+        padding: 6px 12px;
+        text-align: center;
+      }
+
+      > a :hover {
+        background: inherit;
+      }
+    }
+
+    li:hover {
+      background: $color-background;
+    }
+
+    &.notification li {
+      padding: 12px;
+
+      .label {
+        margin-right: 10px;
+      }
+    }
+  }
+
+  &.filedropdown {
+    li {
+      background: lighten($color-background, 3%);
+      border-bottom: 1px solid $border-color;
+      padding: 6px;
+      text-align: left;
+
+      a {
+        margin-right: 10px;
+      }
+
+      > a:hover {
+        background: inherit;
+      }
+    }
+
+    li:hover {
+      background: $color-background;
+    }
+  }
+}
+
+.navbar-nav {
+  > li > a:hover {
+    background: lighten($color-background, 2%);
+    border-bottom: 1px solid $border-color;
+    color: inherit;
+  }
+
+  > li > a:focus {
+    background: lighten($color-background, 2%);
+    border-bottom: 1px solid $border-color;
+    color: inherit;
+  }
+
+  .open > a {
+    background: lighten($color-background, 2%);
+    border-bottom: 1px solid $border-color;
+    color: inherit;
+  }
+
+  .open > a:hover {
+    background: lighten($color-background, 2%);
+    border-bottom: 1px solid $border-color;
+    color: inherit;
+  }
+
+  .open > a:focus {
+    background: lighten($color-background, 2%);
+    border-bottom: 1px solid $border-color;
+    color: inherit;
+  }
+}

src/sass/components/_fonts.scss

+// Fonts
+.font-light {
+  font-weight: 300;
+}
+
+.font-normal {
+  font-weight: 400;
+}
+
+.font-bold {
+  font-weight: 600;
+}
+
+.font-extra-bold {
+  font-weight: 700;
+}
+
+.font-uppercase {
+  text-transform: uppercase;
+}
+
+.font-trans {
+  opacity: .5;
+}
+
+.text-big {
+  font-size: 60px;
+}
+
+h1 {
+  font-weight: 200;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+.h1 {
+  font-weight: 200;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+h2 {
+  font-weight: 200;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+.h2 {
+  font-weight: 200;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+.h3 {
+  font-weight: 200;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+h3 {
+  font-weight: 200;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}

src/sass/components/_grid.scss

+.ng-header-cell {
+  border-bottom: 1px solid $border-color;
+  border-right: 0;
+}
+
+.ng-cell {
+  background-color: transparent;
+  border-right: 0;
+}
+
+.ng-top-panel {
+  background: $white;
+}
+
+.ng-row {
+  border-bottom: 1px solid $border-color;
+
+  &.even {
+    background: $bg-event-row-color;
+  }
+
+  &.selected {
+    background: darken($color-background, 4%);
+  }
+}
+
+.grid-style {
+  border: 1px solid $border-color;
+  height: 400px;
+}
+
+.show-grid {
+  margin: 15px 0;
+
+  [class^="col-"] {
+    background-color: $color-background;
+    border: 1px solid $table-children-border-bottom-color;
+    padding-bottom: 10px;
+    padding-top: 10px;
+  }
+}

src/sass/components/_icheck.scss

+// iCheck plugin Square skin, green
+.iradio-square-green {
+  background-position: -120px 0;
+  border: 0;
+  cursor: pointer;
+  display: inline-block;
+  height: 22px;
+  margin: 0;
+  padding: 0;
+  vertical-align: middle;
+  width: 22px;
+
+  &.hover {
+    background-position: -144px 0;
+  }
+
+  &.checked {
+    background-position: -168px 0;
+
+    &.disabled {
+      background-position: -216px 0;
+    }
+  }
+
+  &.disabled {
+    background-position: -192px 0;
+    cursor: default;
+  }
+  //background: url('img/green.png') no-repeat;
+}
+
+.icheckbox-square-green {
+  background-position: 0 0;
+  border: 0;
+  cursor: pointer;
+  display: inline-block;
+  height: 22px;
+  margin: 0;
+  padding: 0;
+  vertical-align: middle;
+  width: 22px;
+  //background: url('img/green.png') no-repeat;
+
+  &.hover {
+    background-position: -24px 0;
+  }
+
+  &.checked {
+    background-position: -48px 0;
+
+    &.disabled {
+      background-position: -96px 0;
+    }
+  }
+
+  &.disabled {
+    background-position: -72px 0;
+    cursor: default;
+  }
+}
+
+// HiDPI support
+@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
+  .icheckbox-square-green,
+  .iradio-square-green {
+    //background-image: url('img/green@2x.png');
+    background-size: 240px 24px;
+  }
+}

src/sass/components/_lists.scss

+$list-item-date-color: #aaa;
+
+// Lists
+.list {
+  .list-item-container {
+    float: left;
+
+    div:first-child {
+      border-top: 0;
+    }
+  }
+
+  .list-item-container-small {
+    min-width: 80px;
+    text-align: center;
+  }
+
+  .list-item {
+    border-top: 1px solid $border-color;
+    float: left;
+    margin-top: 10px;
+    overflow-x: hidden;
+    padding-top: 10px;
+    position: relative;
+    width: 100%;
+
+    .list-item-content {
+      p {
+        margin-bottom: 3px;
+        margin-top: 0;
+      }
+
+      .list-item-right {
+        height: 100%;
+        padding: 0 10px;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      .list-item-title {
+        font-size: 12px;
+        font-weight: 600;
+        line-height: 20px;
+        margin: 0;
+      }
+    }
+  }
+
+  .list-item-date {
+    color: $list-item-date-color;
+    font-size: 10px;
+    text-align: center;
+  }
+}

src/sass/components/_loader.scss

+.spinner {
+  font-size: 15px;
+  height: 50px;
+  margin: 20px auto;
+  text-align: center;
+  width: 60px;
+
+  > div {
+    animation: sk-stretchdelay 1.2s infinite ease-in-out;
+    background-color: $color-green;
+    display: inline-block;
+    height: 100%;
+    width: 8px;
+  }
+
+  .rect2 {
+    animation-delay: -1.1s;
+  }
+
+  .rect3 {
+    animation-delay: -1s;
+  }
+
+  .rect4 {
+    animation-delay: -.9s;
+  }
+
+  .rect5 {
+    animation-delay: -.8s;
+  }
+}
+
+@keyframes sk-stretchdelay {
+  0%, 40%, 100% {
+    transform: scaleY(.4);
+  }
+
+  20% {
+    transform: scaleY(1);
+  }
+}

src/sass/components/_modal.scss

+.h-modal-icon {
+  font-size: 66px;
+}
+
+.inmodal .color-line {
+  border-radius: 4px 4px 0 0;
+}
+
+.modal-content {
+  border: 0;
+  border-radius: 5px;
+  box-shadow: 0 0 1px $color-shadow-modal-content1, 0 2px 4px $color-shadow-modal-content2;
+}
+
+.modal-backdrop.in {
+  bottom: 0;
+  position: fixed;
+
+  &.in {
+    opacity: .4;
+  }
+}
+
+.modal-dialog {
+  margin-top: 80px;
+}
+
+.modal-title {
+  font-size: 30px;
+  font-weight: 300;
+}
+
+.modal-header {
+  background: $color-bright;
+  padding: 40px 30px;
+
+  small {
+    color: lighten($color-text, 20%);
+  }
+}
+
+.modal-body {
+  padding: 20px 30px;
+}
+
+.modal-footer {
+  background: $color-bright;
+}
+
+.hmodal-info {
+  .color-line {
+    background: $color-blue;
+  }
+
+  h4 {
+    &.modal-title {
+      color: $color-blue;
+    }
+  }
+}
+
+.hmodal-warning {
+  .color-line {
+    background: $color-yellow;
+  }
+
+  h4 {
+    .modal-title {
+      color: $color-yellow;
+    }
+  }
+}
+
+.hmodal-success {
+  .color-line {
+    background: $color-green;
+  }
+
+  h4 {
+    .modal-title {
+      color: $color-green;
+    }
+  }
+}
+
+.hmodal-danger {
+  .color-line {
+    background: $color-red-deep;
+  }
+
+  h4 {
+    .modal-title {
+      color: $color-red-deep;
+    }
+  }
+}

src/sass/components/_module.scss

+@import 'alerts';
+@import 'buttons';
+@import 'contact';
+@import 'dropdown';
+@import 'fonts';
+@import 'grid';
+@import 'icheck';
+@import 'lists';
+@import 'loader';
+@import 'modal';
+@import 'panels';
+@import 'progress_bar';
+@import 'tabs';
+@import 'tooltip';
+@import 'tour';
+@import 'various';

src/sass/components/_panels.scss

+// Panels
+.hpanel {
+  background-color: transparent;
+  border: 0;
+  box-shadow: 0;
+  margin-bottom: 25px;
+
+  &.panel-collapse {
+    > .panel-heading {
+      background: $white;
+      border: 1px solid $border-color;
+      border-color: $border-color;
+      border-radius: 2px;
+      padding: 10px;
+    }
+  }
+
+  > .panel-heading {
+    border: 1px solid transparent;
+    color: inherit;
+    font-weight: 600;
+    padding: 10px 4px;
+    transition: all .3s;
+  }
+
+  .hbuilt {
+    background: $white;
+    border: 1px solid $border-color;
+    border-color: $border-color;
+    border-radius: 2px;
+    padding: 10px;
+
+    &.panel-heading {
+      border-bottom: 0;
+    }
+
+    > .panel-footer,
+    > .panel-section {
+      background: $color-bright;
+      border: 1px solid $border-color;
+      border-top: 0;
+      color: inherit;
+      font-size: 90%;
+      padding: 10px 15px;
+    }
+  }
+
+  .panel-body {
+    background: $white;
+    border: 1px solid $border-color;
+    border-radius: 2px;
+    padding: 20px;
+    position: relative;
+  }
+
+  &.panel-group {
+    .panel-body:first-child {
+      border-top: 1px solid $border-color;
+    }
+
+    .panel-body {
+      border-top: 0;
+    }
+  }
+
+  .alert {
+    border: 1px solid $border-color;
+    border-bottom: 0;
+    border-radius: 0;
+    margin-bottom: 0;
+  }
+
+  &.hgreen {
+    .panel-body {
+      border-top: 2px solid $color-green;
+    }
+  }
+
+  &.hblue {
+    .panel-body {
+      border-top: 2px solid $color-blue;
+    }
+  }
+
+  &.hyellow {
+    .panel-body {
+      border-top: 2px solid $color-yellow;
+    }
+  }
+
+  &.hviolet {
+    .panel-body {
+      border-top: 2px solid $color-violet;
+    }
+  }
+
+  &.horange {
+    .panel-body {
+      border-top: 2px solid $color-orange;
+    }
+  }
+
+  &.hred {
+    .panel-body {
+      border-top: 2px solid $color-red;
+    }
+  }
+
+  &.hreddeep {
+    .panel-body {
+      border-top: 2px solid $color-red-deep;
+    }
+  }
+
+  &.hnavyblue {
+    .panel-body {
+      border-top: 2px solid $color-navy-blue;
+    }
+  }
+
+  &.hbggreen {
+    .panel-body {
+      background: $color-green;
+      border: 0;
+      color: $white;
+    }
+  }
+
+  &.hbgblue {
+    .panel-body {
+      background: $color-blue;
+      border: 0;
+      color: $white;
+    }
+  }
+
+  &.hbgyellow {
+    .panel-body {
+      background: $color-yellow;
+      border: 0;
+      color: $white;
+    }
+  }
+
+  &.hbgviolet {
+    .panel-body {
+      background: $color-violet;
+      border: 0;
+      color: $white;
+    }
+  }
+
+  &.hbgorange {
+    .panel-body {
+      background: $color-orange;
+      border: 0;
+      color: $white;
+    }
+  }
+
+  &.hbgred {
+    .panel-body {
+      background: $color-red;
+      border: 0;
+      color: $white;
+    }
+  }
+
+  &.hbgreddeep {
+    .panel-body {
+      background: $color-red-deep;
+      border: 0;
+      color: $white;
+    }
+  }
+
+  &.hbgnavyblue {
+    .panel-body {
+      background: $color-navy-blue;
+      border: 0;
+      color: $white;
+    }
+  }
+
+  &.collapsed {
+    .panel-body,
+    .panel-footer {
+      display: none;
+    }
+
+    .fa {
+      &.fa-chevron-up::before {
+        content: '\f078';
+      }
+
+      &.fa-chevron-down::before {
+        content: '\f077';
+      }
+    }
+
+    &.panel-collapse {
+      .panel-body {
+        border: 1px solid $border-color;
+        border-top-width: 0;
+      }
+    }
+
+    .hbuilt {
+      &.panel-heading {
+        border-bottom: 1px solid $border-color;
+      }
+    }
+  }
+
+  &.fullscreen {
+    bottom: 0;
+    left: 0;
+    margin-bottom: 0;
+    overflow: auto;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 2030;
+
+    .showhide {
+      display: none;
+    }
+
+    .panel-body {
+      min-height: calc(100% - 77px);
+    }
+  }
+}
+
+.panel-collapse {
+  .panel-body {
+    border: 0;
+  }
+}
+
+.panel-tools {
+  display: inline-block;
+  float: right;
+  margin-top: 0;
+  padding: 0;
+  position: relative;
+
+  a {
+    color: lighten($color-text, 20%);
+    cursor: pointer;
+    margin-left: 5px;
+  }
+}
+
+.panel-group {
+  .panel-heading {
+    background-color: $color-bright;
+  }
+}
+
+.small-header {
+  padding: 0;
+
+  .hpanel {
+    margin-bottom: 0;
+  }
+
+  .panel-body {
+    border-left: 0;
+    border-radius: 0;
+    border-right: 0;
+    border-top: 0;
+    padding: 15px 25px;
+
+    h2 {
+      font-size: 14px;
+      font-weight: 600;
+      margin: 0;
+      text-transform: uppercase;
+    }
+
+    small {
+      color: lighten($color-text, 10%);
+    }
+  }
+}
+
+.panel-body {
+  h5,
+  h4 {
+    font-weight: 600;
+  }
+}
+
+.hbreadcrumb {
+  background-color: $white;
+  font-size: 11px;
+  list-style: none;
+  margin-bottom: 0;
+  margin-top: 6px;
+  padding: 2px 0;
+
+  > li {
+    display: inline-block;
+
+    + li::before {
+      color: $color-navy-blue;
+      padding: 0 5px;
+    }
+  }
+
+  > .active {
+    color: lighten($color-text, 20%);
+  }
+}
+
+.wrapper {
+  padding: 10px 20px;
+}
+
+body {
+  &.fullscreen-panel-mode {
+    overflow-y: hidden;
+  }
+}

src/sass/components/_progress_bar.scss

+// Progress bar
+
+.progress {
+  border-radius: 2px;
+  margin-bottom: 10px;
+}
+
+.progress-bar {
+  background-color: $color-background;
+  color: $color-text;
+  padding-right: 10px;
+  text-align: right;
+}
+
+.progress-small.progress-small .progress-bar {
+  height: 10px;
+}
+
+.progress-small .progress-bar {
+  height: 10px;
+}
+
+.progress-bar-success {
+  border-right: 4px solid darken($color-green, 5%);
+}
+
+.progress-bar-info {
+  border-right: 4px solid darken($color-blue, 5%);
+}
+
+.progress-bar-warning {
+  border-right: 4px solid darken($color-yellow, 5%);
+}
+
+.progress-bar-danger {
+  border-right: 4px solid darken($color-red, 5%);
+}
+
+.full .progress-bar-success {
+  background-color: $color-green;
+  border-right: 4px solid darken($color-green, 5%);
+}
+
+.full .progress-bar-info {
+  background-color: $color-blue;
+  border-right: 4px solid darken($color-blue, 5%);
+}
+
+.full .progress-bar-warning {
+  background-color: $color-yellow;
+  border-right: 4px solid darken($color-yellow, 5%);
+}
+
+.full .progress-bar-danger {
+  background-color: $color-red;
+  border-right: 4px solid darken($color-red, 5%);
+}
+
+.full .progress-bar {
+  color: $white;
+}

src/sass/components/_tabs.scss

+.nav-tabs {
+  border-bottom: 1px solid $border-color;
+
+  > li {
+    a:hover {
+      background: transparent;
+      border-color: transparent;
+    }
+
+    &.active {
+      > a {
+        border: 1px solid $border-color;
+        border-bottom-color: transparent;
+      }
+
+      > a:hover {
+        border: 1px solid $border-color;
+        border-bottom-color: transparent;
+      }
+
+      > a:focus {
+        border: 1px solid $border-color;
+        border-bottom-color: transparent;
+      }
+    }
+  }
+}
+
+.tab-pane .panel-body {
+  border-top: 0;
+}
+
+.tabs-left .tab-pane .panel-body {
+  border-top: 1px solid $border-color;
+}
+
+.tabs-right .tab-pane .panel-body {
+  border-top: 1px solid $border-color;
+}
+
+.tabs-below > .nav-tabs,
+.tabs-right > .nav-tabs,
+.tabs-left > .nav-tabs {
+  border-bottom: 0;
+}
+
+.tabs-left .panel-body {
+  margin-left: 20%;
+  position: static;
+  width: 80%;
+}
+
+.tabs-left > .nav-tabs {
+  float: left;
+  margin-right: 19px;
+  width: 20%;
+
+  > li {
+    > a {
+      border-radius: 4px 0 0 4px;
+      margin-right: -1px;
+    }
+  }
+}
+
+.tabs-right > .nav-tabs {
+  float: right;
+  margin-left: 19px;
+  width: 20%;
+
+  > li {
+    > a {
+      border-radius: 0 4px 4px 0;
+      margin-left: -1px;
+    }
+  }
+}
+
+.tab-content > .tab-pane,
+.pill-content > .pill-pane {
+  display: none;
+}
+
+.tab-content > .active,
+.pill-content > .active {
+  display: block;
+}
+
+.tabs-below > .nav-tabs {
+  border-top: 1px solid $border-color;
+
+  > li {
+    margin-bottom: 0;
+    margin-top: -1px;
+
+    > a {
+      border-radius: 0 0 4px 4px;
+    }
+  }
+}
+
+.tabs-below > .nav-tabs > li > a:hover,
+.tabs-below > .nav-tabs > li > a:focus {
+  border-bottom-color: transparent;
+  border-top-color: $border-color;
+}
+
+.tabs-left > .nav-tabs > li,
+.tabs-right > .nav-tabs > li {
+  float: none;
+}
+
+.tabs-left > .nav-tabs > li > a,
+.tabs-right > .nav-tabs > li > a {
+  margin-bottom: 3px;
+  margin-right: 0;
+  min-width: 74px;
+}
+
+.tabs-left > .nav-tabs .active > a,
+.tabs-left > .nav-tabs .active > a:hover,
+.tabs-left > .nav-tabs .active > a:focus {
+  border-color: $border-color transparent $border-color $border-color;
+}
+
+.tabs-right > .nav-tabs > li > a:hover,
+.tabs-right > .nav-tabs > li > a:focus {
+  border-color: $border-color-tabs-state $border-color-tabs-state $border-color-tabs-state $table-children-border-bottom-color;
+}
+
+.tabs-right > .nav-tabs .active > a,
+.tabs-right > .nav-tabs .active > a:hover,
+.tabs-right > .nav-tabs .active > a:focus {
+  border-color: $border-color $border-color $border-color transparent;
+  z-index: 1;
+}

src/sass/components/_tooltip.scss

+// tooltip
+.tooltip-inner {
+  background-color: $color-navy-blue;
+}
+
+.tooltip.top .tooltip-arrow {
+  border-top-color: $color-navy-blue;
+}
+
+.tooltip.right .tooltip-arrow {
+  border-right-color: $color-navy-blue;
+}
+
+.tooltip.bottom .tooltip-arrow {
+  border-bottom-color: $color-navy-blue;
+}
+
+.tooltip.left .tooltip-arrow {
+  border-left-color: $color-navy-blue;
+}

src/sass/components/_tour.scss

+.tour-backdrop {
+  opacity: .5;
+}

src/sass/layout/_layout.scss

+// Estas variables deben ir en el archivo de variables
+$white: $white;
+$box-wrapper-color-55p: rgba(0, 0, 0, .55);
+
+// Layout
+html {
+  height: 100%;
+  margin: 0;
+  overflow-x: hidden;
+  padding: 0;
+}
+
+body {
+  background-color: $white;
+  color: $color-text;
+  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+#header {
+  background-color: $white;
+  border-bottom: 1px solid $border-color;
+  display: block;
+  height: 62px;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+#menu {
+  bottom: 0;
+  float: left;
+  left: 0;
+  position: absolute;
+  top: 62px;
+  transition: all .4s ease 0s;
+  width: $menu-width;
+}
+
+
+#wrapper {
+  background: $color-background;
+  border-left: 1px solid $border-color;
+  margin: 0 0 0 $menu-width;
+  min-height: 100%;
+  padding: 0;
+  position: relative;
+  transition: all .4s ease 0s;
+}
+
+.content {
+  min-width: 320px;
+  padding: 25px 40px 40px;
+}
+
+.footer {
+  background: $white;
+  border-top: 1px solid $border-color;
+  bottom: 0;
+  left: 0;
+  padding: 10px 18px;
+  position: absolute;
+  right: 0;
+  transition: all .4s ease 0s;
+}
+
+// Esto deberia ir en tablet
+@media(max-width: 768px) {
+  .content {
+    min-width: 320px;
+    padding: 15px;
+  }
+}
+
+.content-boxed {
+  margin: auto;
+  max-width: 1100px;
+  padding-top: 60px;
+}
+
+#page-header {
+  padding: 20px 40px;
+}
+
+.color-line {
+  background: linear-gradient(to right, $color-navy-blue, $color-navy-blue 25%, $color-violet 25%, $color-violet 35%, $color-blue 35%, $color-blue 45%, $color-green 45%, $color-green 55%, $color-yellow 55%, $color-yellow 65%, $color-orange 65%, $color-orange 75%, $color-red 85%, $color-red 85%, $color-red-deep 85%, $color-red-deep 100%) no-repeat 50% 100%;
+  background-size: 100% 6px;
+  height: 6px;
+}
+
+.fixed-navbar {
+  #header {
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+  }
+
+  #wrapper {
+    top: 62px;
+  }
+}
+
+.fixed-sidebar {
+  #menu {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    padding-right: 17px;
+    position: fixed;
+    width: 197px;
+  }
+
+  &.show-sidebar {
+    #menu {
+      width: 180px;
+    }
+  }
+}
+
+.fixed-footer {
+  .footer {
+    bottom: 0;
+    left: 181px;
+    position: fixed;
+    right: 0;
+    z-index: 1001;
+  }
+
+  &.hide-sidebar {
+    .footer {
+      left: 0;
+    }
+  }
+}
+
+// Esto deberia ir en tablet
+@media(max-width: 768px) {
+
+  .fixed-footer {
+    .footer {
+      left: 0;
+    }
+
+    &.show-sidebar {
+      .footer {
+        left: 181px;
+      }
+    }
+  }
+
+}
+
+#right-sidebar {
+  background-color: $white;
+  border-left: 1px solid $border-color;
+  bottom: 0;
+  display: none;
+  overflow: auto;
+  position: fixed;
+  right: 0;
+  top: 0;
+  width: 260px;
+  z-index: 1009;
+
+  &.sidebar-open {
+    display: block;
+  }
+}
+
+.fixed-small-header {
+  .small-header {
+    left: 0;
+    margin-left: 181px;
+    position: fixed;
+    right: 0;
+    top: 62px;
+    z-index: 100;
+  }
+
+  .content {
+    padding-top: 80px;
+  }
+
+  &.hide-sidebar {
+    .small-header {
+      margin-left: 0;
+    }
+  }
+
+  &.page-small {
+    .small-header {
+      margin-left: 0;
+    }
+
+    .content {
+      padding-top: 120px;
+    }
+
+    &.show-sidebar {
+      .small-header {
+        margin-left: 181px;
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+.boxed {
+  background-color: $white;
+
+  .profile-picture {
+    background-color: $white;
+  }
+
+  .boxed-wrapper {
+    box-shadow: 0 0 3px 0 $box-wrapper-color-55p;
+    display: block;
+    margin: 0 auto;
+    max-width: 1200px;
+    overflow: hidden;
+    position: relative;
+  }
+}

src/sass/layout/_module.scss

+@import 'layout';

src/sass/routes/_landing.scss

+// Estas variables deben ir en el archivo de variables
+$color-dark: #455463;
+$text-light: #a7afb8;
+$heading-color: #edf0f5;
+$white: #fff;
+$color-51: rgba(51, 51, 51, 1);
+$pricing-plan-li-color: #aeaeae;
+
+.landing-page {
+
+  .navbar-form-custom,
+  .navbar-right,
+  #logo {
+    display: block;
+  }
+
+  .navbar-default {
+    background: $white;
+
+    &.navbar-toggle:hover,
+    .navbar-toggle:focus {
+      background: $color-green;
+
+      &.icon-bar {
+        background-color: $white;
+      }
+    }
+
+    &.navbar-nav {
+      > .active > a,
+      > .active > a:hover,
+      > .active > a:focus {
+        background-color: transparent;
+        border: 0;
+        color: $color-green;
+      }
+    }
+  }
+
+  li {
+    a:hover {
+      border-bottom: 0;
+    }
+
+    &.pricing-desc {
+      border-top: 0;
+      font-size: 13px;
+      padding: 20px 16px 0;
+    }
+
+    &.pricing-title {
+      border-radius: 4px 4px 0 0;
+      color: $color-dark;
+      font-size: 22px;
+      font-weight: 600;
+      padding: 25px 10px 0;
+    }
+  }
+
+  .navbar {
+    &.navbar-brand {
+      background-color: $color-green;
+      border-radius: 5px;
+      color: $white;
+      display: block;
+      font-size: 12px;
+      font-weight: 700;
+      height: auto;
+      margin-left: 0;
+      margin-top: 8px;
+      padding: 9px 15px;
+    }
+  }
+
+  .brand-desc {
+    color: $color-dark;
+    margin: 17px 10px 0 90px;
+    width: 180px;
+  }
+
+  .navbar-nav {
+    > li {
+      height: 55px;
+
+      > a {
+        color: $color-dark;
+        font-size: 14px;
+        font-weight: 600;
+        height: 55px;
+        padding: 15px;
+      }
+    }
+  }
+
+  header {
+    height: 480px;
+    margin-bottom: 30px;
+    padding-top: 50px;
+
+    .container {
+      position: relative;
+    }
+  }
+
+  section {
+    border-bottom: 1px solid $border-color;
+    padding: 50px 0;
+
+    h2 {
+      margin-top: 0;
+    }
+
+    p {
+      margin-top: 0;
+    }
+  }
+
+  .heading {
+    color: $heading-color;
+    margin-top: 60px;
+
+    h1 {
+      font-size: 34px;
+      font-weight: 600;
+      letter-spacing: -.5px;
+      margin-bottom: 5px;
+    }
+
+    span {
+      font-size: 13px;
+      font-weight: 600;
+    }
+
+    p {
+      &.small {
+        color: $text-light;
+        margin-top: 10px;
+        max-width: 260px;
+      }
+    }
+  }
+
+  h4 {
+    font-weight: 600;
+  }
+
+  p {
+    color: $text-light;
+  }
+
+  .heading-image {
+    position: absolute;
+    right: 60px;
+    text-align: right;
+    top: 120px;
+
+    p {
+      color: $text-light;
+      margin-bottom: 5px;
+    }
+
+    img {
+      border-radius: 1px;
+      box-shadow: 0 0 8px 0 $color-51;
+      margin-left: 12px;
+      margin-top: 12px;
+      width: 180px;
+    }
+  }
+
+  .navy-link {
+    background: $color-dark;
+    color: $white;
+  }
+
+  .icon-big {
+    font-size: 70px;
+  }
+
+  .team-member {
+    img {
+      height: 72px;
+    }
+  }
+
+  .social-icon {
+    a {
+      background: $color-green;
+      border-radius: 4px;
+      color: $white;
+      display: block;
+      height: 28px;
+      padding: 4px 8px;
+      text-align: center;
+      width: 28px;
+    }
+
+    a:hover {
+      background: darken($color-green, 4%);
+    }
+  }
+
+  .list-inline {
+    > li {
+      padding: 0;
+    }
+  }
+
+  .pricing-plan {
+    background: $white;
+    border: 1px solid $border-color;
+    border-radius: 4px;
+    margin: 20px 10px 0;
+    padding-bottom: 20px;
+
+    li {
+      color: $pricing-plan-li-color;
+      padding: 10px 16px;
+      text-align: center;
+    }
+
+    .pricing-price {
+      span {
+        color: $color-green;
+        font-size: 30px;
+        font-weight: 700;
+      }
+    }
+
+  }
+
+  .pricing-title {
+    .label {
+      font-size: 12px;
+    }
+  }
+
+  .client {
+    background: $color-bright;
+    color: $text-light;
+    font-weight: 600;
+    margin: 0 0 20px;
+    padding: 30px 10px;
+    text-transform: uppercase;
+  }
+
+  // Esto debe ir en responsive/desktop
+  @media (max-width: 1200px) {
+
+    .heading-image {
+      display: none;
+    }
+
+    .heading {
+      text-align: center;
+
+      p {
+        &.small {
+          margin: 10px auto;
+        }
+      }
+    }
+
+    .brand-desc {
+      display: none;
+    }
+
+    .navbar {
+      .navbar-brand {
+        margin-left: 10px;
+      }
+    }
+  }
+}

src/sass/routes/_login.scss

+body {
+  &.blank {
+    background-color: $color-background;
+  }
+}
+
+.login-container {
+  margin: auto;
+  max-width: 420px;
+  padding-top: 6%;
+}
+
+.register-container {
+  margin: auto;
+  max-width: 720px;
+  padding-top: 6%;
+}
+
+.lock-container {
+  margin: auto;
+  max-width: 420px;
+  padding-top: 6%;
+}
+
+.error-container {
+  margin: auto;
+  max-width: 620px;
+  padding-top: 6%;
+
+  h1 {
+    font-size: 44px;
+  }
+}
+
+.big-icon {
+  font-size: 120px;
+}
+
+.back-link {
+  float: left;
+  margin: 10px;
+  width: 100%;
+}
+
+@media(max-width: 420px) {
+  .login-container,
+  .lock-container {
+    margin: auto 10px;
+  }
+}
+
+@media(max-width: 720px) {
+  .register-container {
+    margin: auto 10px;
+  }
+
+  .lock-container {
+    padding-top: 15%;
+  }
+}
+
+@media(max-width: 620px) {
+  .error-container {
+    margin: auto 10px;
+  }
+}

src/sass/routes/_module.scss

+@import 'landing';
+@import 'login';

src/sass/styles.scss

@@ -2,12 +2,13 @@
 
 @import 'compass/utilities';
 @import 'compass/css3';
-
 // Dependancies
 @import '~bootstrap/dist/css/bootstrap.css';
 @import '~jasny-bootstrap/dist/css/jasny-bootstrap.css';
 @import '~perfect-scrollbar/dist/css/perfect-scrollbar.css';
 @import '~font-awesome/css/font-awesome.css';
-
 // styles.scss
 @import 'utils/module';
+@import 'layout/module';
+@import 'routes/module';
+@import 'components/module';

src/sass/utils/_mixins.scss

 @charset 'UTF-8';
+
+// Mixin
+@mixin bg-transparent($color, $alpha: 1) {
+  background: rgba(red($color), green($color), blue($color), $alpha);
+}
+
+@mixin color-transparent($color, $alpha: 1) {
+  color: rgba(red($color), green($color), blue($color), $alpha);
+}