Merge pull request #6 from ZBoxApp/styles

Styles

.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
 

package.json

@@ -43,7 +43,7 @@
     "sass-loader": "3.2.0",
     "style-loader": "0.13.0",
     "url-loader": "0.5.7",
-    "webpack": "^1.12.15"
+    "webpack": "webpack/webpack#master"
   },
   "scripts": {
     "check": "eslint --ext \".jsx\" --ignore-pattern node_modules --quiet .",

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/_buttons.scss

+.header-line {
+  float: left;
+  height: 6px;
+  margin: 0;
+  position: relative;
+  width: 10%;
+
+  &.extreme-color {
+    width: 20%;
+  }
+
+  div {
+    color: $white;
+    font-weight: 600;
+    left: 15px;
+    position: absolute;
+    top: 70px;
+
+    span {
+      @include color-transparent($white, .6);
+      display: block;
+      font-size: 12px;
+      font-weight: 400;
+    }
+  }
+}
+
+.color-demo {
+  .header-line {
+    height: 118px;
+
+    &::after {
+      @include bg-transparent($black, .2);
+      content: '';
+      display: block;
+      height: 10px;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+}
+
+//Buttons
+
+.btn {
+  border-radius: 3px;
+}
+
+.float-e-margins .btn {
+  margin-bottom: 5px;
+}
+
+.btn-primary {
+  background-color: $color-navy-blue;
+  border-color: $color-navy-blue;
+  color: $white;
+
+  &.btn-outline {
+    color: $color-navy-blue;
+  }
+
+  &.disabled {
+    background-color: darken($color-navy-blue, 6%);
+    border-color: darken($color-navy-blue, 6%);
+
+    &:hover {
+      background-color: darken($color-navy-blue, 6%);
+      border-color: darken($color-navy-blue, 6%);
+    }
+
+    &:focus {
+      background-color: darken($color-navy-blue, 6%);
+      border-color: darken($color-navy-blue, 6%);
+    }
+
+    &:active {
+      background-color: darken($color-navy-blue, 6%);
+      border-color: darken($color-navy-blue, 6%);
+    }
+
+    &.active {
+      background-color: darken($color-navy-blue, 6%);
+      border-color: darken($color-navy-blue, 6%);
+    }
+  }
+
+  &[disabled] {
+    background-color: darken($color-navy-blue, 6%);
+    border-color: darken($color-navy-blue, 6%);
+
+    &:hover {
+      background-color: darken($color-navy-blue, 6%);
+      border-color: darken($color-navy-blue, 6%);
+    }
+
+    &:focus {
+      background-color: darken($color-navy-blue, 6%);
+      border-color: darken($color-navy-blue, 6%);
+    }
+
+    &:active {
+      background-color: darken($color-navy-blue, 6%);
+      border-color: darken($color-navy-blue, 6%);
+    }
+  }
+
+  &:hover {
+    background-color: lighten($color-navy-blue, 6%);
+    border-color: lighten($color-navy-blue, 6%);
+    color: $white;
+  }
+
+  &:focus {
+    background-color: lighten($color-navy-blue, 6%);
+    border-color: lighten($color-navy-blue, 6%);
+    color: $white;
+  }
+
+  &:active {
+    background-color: lighten($color-navy-blue, 6%);
+    background-image: none;
+    border-color: lighten($color-navy-blue, 6%);
+    color: $white;
+  }
+
+  &.active {
+    background-color: lighten($color-navy-blue, 6%);
+    background-image: none;
+    border-color: lighten($color-navy-blue, 6%);
+    color: $white;
+
+    &[disabled] {
+      background-color: darken($color-navy-blue, 6%);
+      border-color: darken($color-navy-blue, 6%);
+    }
+  }
+}
+
+.btn-success {
+  background-color: $color-green;
+  border-color: $color-green;
+  color: $white;
+
+  &.btn-outline {
+    color: $color-green;
+  }
+
+  &:hover {
+    background-color: lighten($color-green, 6%);
+    border-color: lighten($color-green, 6%);
+    color: $white;
+  }
+
+  &:focus {
+    background-color: lighten($color-green, 6%);
+    border-color: lighten($color-green, 6%);
+    color: $white;
+  }
+
+  &:active {
+    background-color: lighten($color-green, 6%);
+    background-image: none;
+    border-color: lighten($color-green, 6%);
+    color: $white;
+  }
+
+  &.active {
+    background-color: lighten($color-green, 6%);
+    background-image: none;
+    border-color: lighten($color-green, 6%);
+    color: $white;
+  }
+
+  &.active[disabled] {
+    background-color: darken($color-green, 6%);
+    border-color: darken($color-green, 6%);
+  }
+
+  &.disabled {
+    background-color: darken($color-green, 6%);
+    border-color: darken($color-green, 6%);
+
+    &.active {
+      background-color: darken($color-green, 6%);
+      border-color: darken($color-green, 6%);
+    }
+  }
+
+  &.disabled:hover {
+    background-color: darken($color-green, 6%);
+    border-color: darken($color-green, 6%);
+  }
+
+  &.disabled:focus {
+    background-color: darken($color-green, 6%);
+    border-color: darken($color-green, 6%);
+  }
+
+  &.disabled:active {
+    background-color: darken($color-green, 6%);
+    border-color: darken($color-green, 6%);
+  }
+
+  &[disabled] {
+    background-color: darken($color-green, 6%);
+    border-color: darken($color-green, 6%);
+  }
+
+  &[disabled]:hover {
+    background-color: darken($color-green, 6%);
+    border-color: darken($color-green, 6%);
+  }
+
+  &[disabled]:focus {
+    background-color: darken($color-green, 6%);
+    border-color: darken($color-green, 6%);
+  }
+
+  &[disabled]:active {
+    background-color: darken($color-green, 6%);
+    border-color: darken($color-green, 6%);
+  }
+}
+
+.btn-info {
+  background-color: $color-blue;
+  border-color: $color-blue;
+  color: $white;
+
+  &.btn-outline {
+    color: $color-blue;
+  }
+
+  &:hover {
+    background-color: lighten($color-blue, 6%);
+    border-color: lighten($color-blue, 6%);
+    color: $white;
+  }
+
+  &:focus {
+    background-color: lighten($color-blue, 6%);
+    border-color: lighten($color-blue, 6%);
+    color: $white;
+  }
+
+  &:active {
+    background-color: lighten($color-blue, 6%);
+    background-image: none;
+    border-color: lighten($color-blue, 6%);
+    color: $white;
+  }
+
+  &.active {
+    background-color: lighten($color-blue, 6%);
+    background-image: none;
+    border-color: lighten($color-blue, 6%);
+    color: $white;
+  }
+
+  &[disabled] {
+    background-color: darken($color-blue, 6%);
+    border-color: darken($color-blue, 6%);
+  }
+
+  &[disabled]:hover {
+    background-color: darken($color-blue, 6%);
+    border-color: darken($color-blue, 6%);
+  }
+
+  &[disabled]:focus {
+    background-color: darken($color-blue, 6%);
+    border-color: darken($color-blue, 6%);
+  }
+
+  &[disabled]:active {
+    background-color: darken($color-blue, 6%);
+    border-color: darken($color-blue, 6%);
+  }
+
+  &.disabled {
+    background-color: darken($color-blue, 6%);
+    border-color: darken($color-blue, 6%);
+
+    &.active {
+      background-color: darken($color-blue, 6%);
+      border-color: darken($color-blue, 6%);
+    }
+  }
+
+  &.disabled:hover {
+    background-color: darken($color-blue, 6%);
+    border-color: darken($color-blue, 6%);
+  }
+
+  &.disabled:focus {
+    background-color: darken($color-blue, 6%);
+    border-color: darken($color-blue, 6%);
+  }
+
+  &.disabled:active {
+    background-color: darken($color-blue, 6%);
+    border-color: darken($color-blue, 6%);
+  }
+
+  &.active[disabled] {
+    background-color: darken($color-blue, 6%);
+    border-color: darken($color-blue, 6%);
+  }
+}
+
+.btn-primary.btn-outline:hover,
+.btn-success.btn-outline:hover,
+.btn-info.btn-outline:hover,
+.btn-warning.btn-outline:hover,
+.btn-danger.btn-outline:hover {
+  color: $white;
+}
+
+.open .dropdown-toggle.btn-primary {
+  background-color: lighten($color-navy-blue, 6%);
+  background-image: none;
+  border-color: lighten($color-navy-blue, 6%);
+  color: $white;
+}
+
+fieldset {
+  &[disabled] {
+    .btn-primary {
+      background-color: darken($color-navy-blue, 6%);
+      border-color: darken($color-navy-blue, 6%);
+
+      &.active {
+        background-color: darken($color-navy-blue, 6%);
+        border-color: darken($color-navy-blue, 6%);
+      }
+    }
+
+    .btn-primary:hover {
+      background-color: darken($color-navy-blue, 6%);
+      border-color: darken($color-navy-blue, 6%);
+    }
+
+    .btn-primary:focus {
+      background-color: darken($color-navy-blue, 6%);
+      border-color: darken($color-navy-blue, 6%);
+    }
+
+    .btn-primary:active {
+      background-color: darken($color-navy-blue, 6%);
+      border-color: darken($color-navy-blue, 6%);
+    }
+
+    .btn-primary2 {
+      background-color: darken($color-violet, 6%);
+      border-color: darken($color-violet, 6%);
+
+      &.active {
+        background-color: darken($color-violet, 6%);
+        border-color: darken($color-violet, 6%);
+      }
+    }
+
+    .btn-primary2:hover {
+      background-color: darken($color-violet, 6%);
+      border-color: darken($color-violet, 6%);
+    }
+
+    .btn-primary2:focus {
+      background-color: darken($color-violet, 6%);
+      border-color: darken($color-violet, 6%);
+    }
+
+    .btn-primary2:active {
+      background-color: darken($color-violet, 6%);
+      border-color: darken($color-violet, 6%);
+    }
+
+    .btn-success {
+      background-color: darken($color-green, 6%);
+      border-color: darken($color-green, 6%);
+
+      &.active {
+        background-color: darken($color-green, 6%);
+        border-color: darken($color-green, 6%);
+      }
+    }
+
+    .btn-success:hover {
+      background-color: darken($color-green, 6%);
+      border-color: darken($color-green, 6%);
+    }
+
+    .btn-success:focus {
+      background-color: darken($color-green, 6%);
+      border-color: darken($color-green, 6%);
+    }
+
+    .btn-success:active {
+      background-color: darken($color-green, 6%);
+      border-color: darken($color-green, 6%);
+    }
+
+    .btn-info {
+      background-color: darken($color-blue, 6%);
+      border-color: darken($color-blue, 6%);
+
+      &.active {
+        background-color: darken($color-blue, 6%);
+        border-color: darken($color-blue, 6%);
+      }
+    }
+
+    .btn-info:hover {
+      background-color: darken($color-blue, 6%);
+      border-color: darken($color-blue, 6%);
+    }
+
+    .btn-info:focus {
+      background-color: darken($color-blue, 6%);
+      border-color: darken($color-blue, 6%);
+    }
+
+    .btn-info:active {
+      background-color: darken($color-blue, 6%);
+      border-color: darken($color-blue, 6%);
+    }
+
+    .btn-default {
+      background-color: darken($color-bright, 6%);
+      border-color: darken($color-bright, 6%);
+
+      &.active {
+        background-color: darken($color-bright, 6%);
+        border-color: darken($color-bright, 6%);
+      }
+    }
+
+    .btn-default:hover {
+      background-color: darken($color-bright, 6%);
+      border-color: darken($color-bright, 6%);
+    }
+
+    .btn-default:focus {
+      background-color: darken($color-bright, 6%);
+      border-color: darken($color-bright, 6%);
+    }
+
+    .btn-default:active {
+      background-color: darken($color-bright, 6%);
+      border-color: darken($color-bright, 6%);
+    }
+
+    .btn-warning {
+      background-color: darken($color-yellow, 6%);
+      border-color: darken($color-yellow, 6%);
+
+      &.active {
+        background-color: darken($color-yellow, 6%);
+        border-color: darken($color-yellow, 6%);
+      }
+    }
+
+    .btn-warning:hover {
+      background-color: darken($color-yellow, 6%);
+      border-color: darken($color-yellow, 6%);
+    }
+
+    .btn-warning:focus {
+      background-color: darken($color-yellow, 6%);
+      border-color: darken($color-yellow, 6%);
+    }
+
+    .btn-warning:active {
+      background-color: darken($color-yellow, 6%);
+      border-color: darken($color-yellow, 6%);
+    }
+
+    .btn-warning2 {
+      background-color: darken($color-orange, 6%);
+      border-color: darken($color-orange, 6%);
+
+      &.active {
+        background-color: darken($color-orange, 6%);
+        border-color: darken($color-orange, 6%);
+      }
+    }
+
+    .btn-warning2:hover {
+      background-color: darken($color-orange, 6%);
+      border-color: darken($color-orange, 6%);
+    }
+
+    .btn-warning2:focus {
+      background-color: darken($color-orange, 6%);
+      border-color: darken($color-orange, 6%);
+    }
+
+    .btn-warning2:active {
+      background-color: darken($color-orange, 6%);
+      border-color: darken($color-orange, 6%);
+    }
+
+    .btn-danger {
+      background-color: darken($color-red, 6%);
+      border-color: darken($color-red, 6%);
+
+      &.active {
+        background-color: darken($color-red, 6%);
+        border-color: darken($color-red, 6%);
+      }
+    }
+
+    .btn-danger:hover {
+      background-color: darken($color-red, 6%);
+      border-color: darken($color-red, 6%);
+    }
+
+    .btn-danger:focus {
+      background-color: darken($color-red, 6%);
+      border-color: darken($color-red, 6%);
+    }
+
+    .btn-danger:active {
+      background-color: darken($color-red, 6%);
+      border-color: darken($color-red, 6%);
+    }
+
+    .btn-danger2 {
+      background-color: darken($color-red-deep, 6%);
+      border-color: darken($color-red-deep, 6%);
+
+      &.active {
+        background-color: darken($color-red-deep, 6%);
+        border-color: darken($color-red-deep, 6%);
+      }
+    }
+
+    .btn-danger2:hover {
+      background-color: darken($color-red-deep, 6%);
+      border-color: darken($color-red-deep, 6%);
+    }
+
+    .btn-danger2:focus {
+      background-color: darken($color-red-deep, 6%);
+      border-color: darken($color-red-deep, 6%);
+    }
+
+    .btn-danger2:active {
+      background-color: darken($color-red-deep, 6%);
+      border-color: darken($color-red-deep, 6%);
+    }
+
+    .btn-link {
+      color: lighten($color-text, 20%);
+
+      &.active {
+        color: lighten($color-text, 20%);
+      }
+    }
+
+    .btn-link:hover {
+      color: lighten($color-text, 20%);
+    }
+
+    .btn-link:focus {
+      color: lighten($color-text, 20%);
+    }
+
+    .btn-link:active {
+      color: lighten($color-text, 20%);
+    }
+  }
+}
+
+.btn-primary2 {
+  background-color: $color-violet;
+  border-color: $color-violet;
+  color: $white;
+
+  &.btn-outline {
+    color: $color-violet;
+  }
+
+  &:hover {
+    background-color: lighten($color-violet, 6%);
+    border-color: lighten($color-violet, 6%);
+    color: $white;
+  }
+
+  &:focus {
+    background-color: lighten($color-violet, 6%);
+    border-color: lighten($color-violet, 6%);
+    color: $white;
+  }
+
+  &:active {
+    background-color: lighten($color-violet, 6%);
+    background-image: none;
+    border-color: lighten($color-violet, 6%);
+    color: $white;
+  }
+
+  &.active {
+    background-color: lighten($color-violet, 6%);
+    background-image: none;
+    border-color: lighten($color-violet, 6%);
+    color: $white;
+
+    &[disabled] {
+      background-color: darken($color-violet, 6%);
+      border-color: darken($color-violet, 6%);
+    }
+  }
+
+  &[disabled] {
+    background-color: darken($color-violet, 6%);
+    border-color: darken($color-violet, 6%);
+
+    &:hover {
+      background-color: darken($color-violet, 6%);
+      border-color: darken($color-violet, 6%);
+    }
+
+    &:focus {
+      background-color: darken($color-violet, 6%);
+      border-color: darken($color-violet, 6%);
+    }
+
+    &:active {
+      background-color: darken($color-violet, 6%);
+      border-color: darken($color-violet, 6%);
+    }
+  }
+
+  &.disabled {
+    background-color: darken($color-violet, 6%);
+    border-color: darken($color-violet, 6%);
+
+    &:hover {
+      background-color: darken($color-violet, 6%);
+      border-color: darken($color-violet, 6%);
+    }
+
+    &:focus {
+      background-color: darken($color-violet, 6%);
+      border-color: darken($color-violet, 6%);
+    }
+
+    &:active {
+      background-color: darken($color-violet, 6%);
+      border-color: darken($color-violet, 6%);
+    }
+
+    &.active {
+      background-color: darken($color-violet, 6%);
+      border-color: darken($color-violet, 6%);
+    }
+  }
+}
+
+.open .dropdown-toggle.btn-primary2 {
+  background-color: lighten($color-violet, 6%);
+  background-image: none;
+  border-color: lighten($color-violet, 6%);
+  color: $white;
+}
+
+.open .dropdown-toggle.btn-success {
+  background-color: lighten($color-green, 6%);
+  background-image: none;
+  border-color: lighten($color-green, 6%);
+  color: $white;
+}
+
+.open .dropdown-toggle.btn-info {
+  background-color: lighten($color-blue, 6%);
+  background-image: none;
+  border-color: lighten($color-blue, 6%);
+  color: $white;
+}
+
+.btn-default {
+  background-color: $white;
+  border-color: $border-color;
+  color: $color-text;
+
+  &:hover {
+    background-color: $white;
+    border-color: darken($border-color, 4%);
+    color: darken($color-text, 4%);
+  }
+
+  &:focus {
+    background-color: $white;
+    border-color: darken($border-color, 4%);
+    color: darken($color-text, 4%);
+  }
+
+  &:active {
+    background-color: $white;
+    background-image: none;
+    border-color: darken($border-color, 4%);
+    color: darken($color-text, 4%);
+  }
+
+  &.active {
+    background-color: $white;
+    border-color: darken($border-color, 4%);
+    color: darken($color-text, 4%);
+
+    &[disabled] {
+      background-color: darken($color-bright, 6%);
+      border-color: darken($color-bright, 6%);
+    }
+  }
+
+  &.disabled {
+    background-color: darken($color-bright, 6%);
+    border-color: darken($color-bright, 6%);
+
+    &.active {
+      background-color: darken($color-bright, 6%);
+      border-color: darken($color-bright, 6%);
+    }
+  }
+
+  &.disabled:hover {
+    background-color: darken($color-bright, 6%);
+    border-color: darken($color-bright, 6%);
+  }
+
+  &.disabled:focus {
+    background-color: darken($color-bright, 6%);
+    border-color: darken($color-bright, 6%);
+  }
+
+  &.disabled:active {
+    background-color: darken($color-bright, 6%);
+    border-color: darken($color-bright, 6%);
+  }
+
+  &[disabled] {
+    background-color: darken($color-bright, 6%);
+    border-color: darken($color-bright, 6%);
+  }
+
+  &[disabled]:hover {
+    background-color: darken($color-bright, 6%);
+    border-color: darken($color-bright, 6%);
+  }
+
+  &[disabled]:focus {
+    background-color: darken($color-bright, 6%);
+    border-color: darken($color-bright, 6%);
+  }
+
+  &[disabled]:active {
+    background-color: darken($color-bright, 6%);
+    border-color: darken($color-bright, 6%);
+  }
+}
+
+.open .dropdown-toggle.btn-default {
+  background-color: $white;
+  background-image: none;
+  border-color: darken($border-color, 4%);
+  color: darken($color-text, 4%);
+}
+
+.btn-warning {
+  background-color: $color-yellow;
+  border-color: $color-yellow;
+  color: $white;
+
+  &.btn-outline {
+    color: $color-yellow;
+  }
+
+  &:hover {
+    background-color: lighten($color-yellow, 6%);
+    border-color: lighten($color-yellow, 6%);
+    color: $white;
+  }
+
+  &:focus {
+    background-color: lighten($color-yellow, 6%);
+    border-color: lighten($color-yellow, 6%);
+    color: $white;
+  }
+
+  &:active {
+    background-color: lighten($color-yellow, 6%);
+    background-image: none;
+    border-color: lighten($color-yellow, 6%);
+    color: $white;
+  }
+
+  &.active {
+    background-color: lighten($color-yellow, 6%);
+    background-image: none;
+    border-color: lighten($color-yellow, 6%);
+    color: $white;
+  }
+
+  &.disabled {
+    background-color: darken($color-yellow, 6%);
+    border-color: darken($color-yellow, 6%);
+
+    &.active[disabled] {
+      background-color: darken($color-yellow, 6%);
+      border-color: darken($color-yellow, 6%);
+    }
+
+    &.active {
+      background-color: darken($color-yellow, 6%);
+      border-color: darken($color-yellow, 6%);
+    }
+  }
+
+  &.disabled:hover {
+    background-color: darken($color-yellow, 6%);
+    border-color: darken($color-yellow, 6%);
+  }
+
+  &.disabled:focus {
+    background-color: darken($color-yellow, 6%);
+    border-color: darken($color-yellow, 6%);
+  }
+
+  &.disabled:active {
+    background-color: darken($color-yellow, 6%);
+    border-color: darken($color-yellow, 6%);
+  }
+
+  &[disabled] {
+    background-color: darken($color-yellow, 6%);
+    border-color: darken($color-yellow, 6%);
+  }
+
+  &[disabled]:hover {
+    background-color: darken($color-yellow, 6%);
+    border-color: darken($color-yellow, 6%);
+  }
+
+  &[disabled]:focus {
+    background-color: darken($color-yellow, 6%);
+    border-color: darken($color-yellow, 6%);
+  }
+
+  &[disabled]:active {
+    background-color: darken($color-yellow, 6%);
+    border-color: darken($color-yellow, 6%);
+  }
+}
+
+.open .dropdown-toggle.btn-warning {
+  background-color: lighten($color-yellow, 6%);
+  background-image: none;
+  border-color: lighten($color-yellow, 6%);
+  color: $white;
+}
+
+.btn-warning2 {
+  background-color: $color-orange;
+  border-color: $color-orange;
+  color: $white;
+
+  &.btn-outline {
+    color: $color-orange;
+  }
+
+  &:hover {
+    background-color: lighten($color-orange, 6%);
+    border-color: lighten($color-orange, 6%);
+    color: $white;
+  }
+
+  &:focus {
+    background-color: lighten($color-orange, 6%);
+    border-color: lighten($color-orange, 6%);
+    color: $white;
+  }
+
+  &:active {
+    background-color: lighten($color-orange, 6%);
+    background-image: none;
+    border-color: lighten($color-orange, 6%);
+    color: $white;
+  }
+
+  &.active[disabled] {
+    background-color: darken($color-orange, 6%);
+    border-color: darken($color-orange, 6%);
+  }
+
+  &.active:hover {
+    background-color: lighten($color-orange, 6%);
+    background-image: none;
+    border-color: lighten($color-orange, 6%);
+    color: $white;
+  }
+
+  &.disabled {
+    background-color: darken($color-orange, 6%);
+    border-color: darken($color-orange, 6%);
+
+    &.active {
+      background-color: darken($color-orange, 6%);
+      border-color: darken($color-orange, 6%);
+    }
+  }
+
+  &.disabled:hover {
+    background-color: darken($color-orange, 6%);
+    border-color: darken($color-orange, 6%);
+  }
+
+  &.disabled:focus {
+    background-color: darken($color-orange, 6%);
+    border-color: darken($color-orange, 6%);
+  }
+
+  &.disabled:active {
+    background-color: darken($color-orange, 6%);
+    border-color: darken($color-orange, 6%);
+  }
+
+  &[disabled] {
+    background-color: darken($color-orange, 6%);
+    border-color: darken($color-orange, 6%);
+  }
+
+  &[disabled]:hover {
+    background-color: darken($color-orange, 6%);
+    border-color: darken($color-orange, 6%);
+  }
+
+  &[disabled]:focus {
+    background-color: darken($color-orange, 6%);
+    border-color: darken($color-orange, 6%);
+  }
+
+  &[disabled]:active {
+    background-color: darken($color-orange, 6%);
+    border-color: darken($color-orange, 6%);
+  }
+}
+
+.open .dropdown-toggle.btn-warning2 {
+  background-color: lighten($color-orange, 6%);
+  background-image: none;
+  border-color: lighten($color-orange, 6%);
+  color: $white;
+}
+
+.btn-danger {
+  background-color: $color-red;
+  border-color: $color-red;
+  color: $white;
+
+  &.btn-outline {
+    color: $color-red;
+  }
+
+  &:hover {
+    background-color: lighten($color-red, 6%);
+    border-color: lighten($color-red, 6%);
+    color: $white;
+  }
+
+  &:focus {
+    background-color: lighten($color-red, 6%);
+    border-color: lighten($color-red, 6%);
+    color: $white;
+  }
+
+  &:active {
+    background-color: lighten($color-red, 6%);
+    background-image: none;
+    border-color: lighten($color-red, 6%);
+    color: $white;
+  }
+
+  &.active {
+    background-color: lighten($color-red, 6%);
+    background-image: none;
+    border-color: lighten($color-red, 6%);
+    color: $white;
+
+    &[disabled] {
+      background-color: darken($color-red, 6%);
+      border-color: darken($color-red, 6%);
+    }
+  }
+
+  &.disabled {
+    background-color: darken($color-red, 6%);
+    border-color: darken($color-red, 6%);
+
+    &.active {
+      background-color: darken($color-red, 6%);
+      border-color: darken($color-red, 6%);
+    }
+  }
+
+  &.disabled:hover {
+    background-color: darken($color-red, 6%);
+    border-color: darken($color-red, 6%);
+  }
+
+  &.disabled:focus {
+    background-color: darken($color-red, 6%);
+    border-color: darken($color-red, 6%);
+  }
+
+  &.disabled:active {
+    background-color: darken($color-red, 6%);
+    border-color: darken($color-red, 6%);
+  }
+
+  &[disabled] {
+    background-color: darken($color-red, 6%);
+    border-color: darken($color-red, 6%);
+  }
+
+  &[disabled]:hover {
+    background-color: darken($color-red, 6%);
+    border-color: darken($color-red, 6%);
+  }
+
+  &[disabled]:focus {
+    background-color: darken($color-red, 6%);
+    border-color: darken($color-red, 6%);
+  }
+
+  &[disabled]:active {
+    background-color: darken($color-red, 6%);
+    border-color: darken($color-red, 6%);
+  }
+}
+
+.open .dropdown-toggle.btn-danger {
+  background-color: lighten($color-red, 6%);
+  background-image: none;
+  border-color: lighten($color-red, 6%);
+  color: $white;
+}
+
+.btn-danger2 {
+  background-color: $color-red-deep;
+  border-color: $color-red-deep;
+  color: $white;
+
+  &.btn-outline {
+    color: $color-red-deep;
+  }
+
+  &:hover {
+    background-color: lighten($color-red-deep, 6%);
+    border-color: lighten($color-red-deep, 6%);
+    color: $white;
+  }
+
+  &:focus {
+    background-color: lighten($color-red-deep, 6%);
+    border-color: lighten($color-red-deep, 6%);
+    color: $white;
+  }
+
+  &:active {
+    background-color: lighten($color-red-deep, 6%);
+    background-image: none;
+    border-color: lighten($color-red-deep, 6%);
+    color: $white;
+  }
+
+  &.active {
+    background-color: lighten($color-red-deep, 6%);
+    background-image: none;
+    border-color: lighten($color-red-deep, 6%);
+    color: $white;
+
+    &[disabled] {
+      background-color: darken($color-red-deep, 6%);
+      border-color: darken($color-red-deep, 6%);
+    }
+  }
+
+  &.disabled {
+    background-color: darken($color-red-deep, 6%);
+    border-color: darken($color-red-deep, 6%);
+
+    &.active {
+      background-color: darken($color-red-deep, 6%);
+      border-color: darken($color-red-deep, 6%);
+    }
+  }
+
+  &.disabled:hover {
+    background-color: darken($color-red-deep, 6%);
+    border-color: darken($color-red-deep, 6%);
+  }
+
+  &.disabled:focus {
+    background-color: darken($color-red-deep, 6%);
+    border-color: darken($color-red-deep, 6%);
+  }
+
+  &.disabled:active {
+    background-color: darken($color-red-deep, 6%);
+    border-color: darken($color-red-deep, 6%);
+  }
+
+  &[disabled] {
+    background-color: darken($color-red-deep, 6%);
+    border-color: darken($color-red-deep, 6%);
+  }
+
+  &[disabled]:hover {
+    background-color: darken($color-red-deep, 6%);
+    border-color: darken($color-red-deep, 6%);
+  }
+
+  &[disabled]:focus {
+    background-color: darken($color-red-deep, 6%);
+    border-color: darken($color-red-deep, 6%);
+  }
+
+  &[disabled]:active {
+    background-color: darken($color-red-deep, 6%);
+    border-color: darken($color-red-deep, 6%);
+  }
+}
+
+.open .dropdown-toggle.btn-danger2 {
+  background-color: lighten($color-red-deep, 6%);
+  background-image: none;
+  border-color: lighten($color-red-deep, 6%);
+  color: $white;
+}
+
+.btn-link {
+  color: inherit;
+
+  &:hover {
+    color: $color-text;
+  }
+
+  &:focus {
+    color: $color-text;
+  }
+
+  &:active {
+    background-image: none;
+    color: $color-text;
+  }
+
+  &.active {
+    background-image: none;
+    color: $color-text;
+  }
+
+  &.disabled {
+    color: lighten($color-text, 20%);
+
+    &.active {
+      color: lighten($color-text, 20%);
+    }
+
+    &.active[disabled] {
+      color: lighten($color-text, 20%);
+    }
+  }
+
+  &.disabled:hover {
+    color: lighten($color-text, 20%);
+  }
+
+  &.disabled:focus {
+    color: lighten($color-text, 20%);
+  }
+
+  &.disabled:active {
+    color: lighten($color-text, 20%);
+  }
+
+  &[disabled] {
+    color: lighten($color-text, 20%);
+  }
+
+  &[disabled]:hover {
+    color: lighten($color-text, 20%);
+  }
+
+  &[disabled]:focus {
+    color: lighten($color-text, 20%);
+  }
+
+  &[disabled]:active {
+    color: lighten($color-text, 20%);
+  }
+}
+
+.open .dropdown-toggle.btn-link {
+  background-image: none;
+  color: $color-text;
+}
+
+.btn-outline {
+  background-color: transparent;
+  color: inherit;
+  transition: all .5s;
+}
+
+.btn-xs {
+  border-radius: 3px;
+  font-size: 11px;
+  line-height: 1.5;
+  padding: 1px 7px;
+}
+
+.btn-circle {
+  border-radius: 15px;
+  font-size: 12px;
+  height: 30px;
+  line-height: 1.428571429;
+  padding: 6px 0;
+  text-align: center;
+  width: 30px;
+
+  &.btn-xs {
+    border-radius: 25px;
+    font-size: 10px;
+    height: 20px;
+    line-height: 1;
+    padding: 4px 8px;
+    width: 20px;
+  }
+
+  &.btn-lg {
+    border-radius: 25px;
+    font-size: 18px;
+    height: 50px;
+    line-height: 1.33;
+    padding: 10px 16px;
+    width: 50px;
+  }
+
+  &.btn-xl {
+    border-radius: 35px;
+    font-size: 24px;
+    height: 70px;
+    line-height: 1.33;
+    padding: 10px 16px;
+    width: 70px;
+  }
+}

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/components/_various.scss

+// Opacity
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+// Google Maps
+.google-map {
+  height: 300px;
+}
+
+.hr-line-dashed {
+  background-color: transparent;
+  border-top: 1px dotted $color-background;
+  color: transparent;
+  height: 1px;
+  margin: 20px 0;
+}
+
+.animated-panel {
+  animation-duration: .5s;
+  animation-fill-mode: both;
+}
+
+// Color
+
+.h-bg-navy-blue {
+  background: $color-navy-blue;
+}
+
+.h-bg-violet {
+  background: $color-violet;
+}
+
+.h-bg-blue {
+  background: $color-blue;
+}
+
+.h-bg-green {
+  background: $color-green;
+}
+
+.h-bg-yellow {
+  background: $color-yellow;
+}
+
+.h-bg-orange {
+  background: $color-orange;
+}
+
+.h-bg-red {
+  background: $color-red;
+}
+
+.h-bg-red-deep {
+  background: $color-red-deep;
+}
+
+.text-primary {
+  color: $color-navy-blue;
+}
+
+.text-primary-2 {
+  color: $color-violet;
+}
+
+.text-info {
+  color: $color-blue;
+}
+
+.text-success {
+  color: $color-green;
+}
+
+.text-warning {
+  color: $color-yellow;
+}
+
+.text-danger {
+  color: $color-red;
+}
+
+.text-white {
+  color: $white;
+}
+
+.border-top {
+  border-top: 1px solid $border-color;
+}
+
+.border-bottom {
+  border-bottom: 1px solid $border-color;
+}
+
+.border-right {
+  border-right: 1px solid $border-color;
+}
+
+.border-left {
+  border-left: 1px solid $border-color;
+}
+
+.jqstooltip {
+  box-sizing: content-box;
+}
+
+// Inputs
+
+.has-warning .form-control,
+.has-error .form-control,
+.has-success .form-control {
+  box-shadow: none;
+}
+
+.has-error .form-control {
+  border-color: darken($color-red, 10%);
+}
+
+.has-warning .form-control {
+  border-color: darken($color-yellow, 10%);
+}
+
+.has-success .form-control {
+  border-color: darken($color-green, 10%);
+}
+
+.has-error .help-block {
+  color: darken($color-red, 10%);
+}
+
+.has-error .control-label {
+  color: darken($color-red, 10%);
+}
+
+.has-error .radio {
+  color: darken($color-red, 10%);
+}
+
+.has-error .checkbox {
+  color: darken($color-red, 10%);
+}
+
+.has-error .radio-inline {
+  color: darken($color-red, 10%);
+}
+
+.has-error .checkbox-inline {
+  color: darken($color-red, 10%);
+}
+
+.has-error.radio label {
+  color: darken($color-red, 10%);
+}
+
+.has-error.checkbox label {
+  color: darken($color-red, 10%);
+}
+
+.has-error.radio-inline label {
+  color: darken($color-red, 10%);
+}
+
+.has-error.checkbox-inline label {
+  color: darken($color-red, 10%);
+}
+
+.has-warning .help-block {
+  color: darken($color-yellow, 10%);
+}
+
+.has-warning .control-label {
+  color: darken($color-yellow, 10%);
+}
+
+.has-warning .radio {
+  color: darken($color-yellow, 10%);
+}
+
+.has-warning .checkbox {
+  color: darken($color-yellow, 10%);
+}
+
+.has-warning .radio-inline {
+  color: darken($color-yellow, 10%);
+}
+
+.has-warning .checkbox-inline {
+  color: darken($color-yellow, 10%);
+}
+
+.has-warning.radio label {
+  color: darken($color-yellow, 10%);
+}
+
+.has-warning.checkbox label {
+  color: darken($color-yellow, 10%);
+}
+
+.has-warning.radio-inline label {
+  color: darken($color-yellow, 10%);
+}
+
+.has-warning.checkbox-inline label {
+  color: darken($color-yellow, 10%);
+}
+
+.has-success .help-block {
+  color: darken($color-green, 10%);
+}
+
+.has-success .control-label {
+  color: darken($color-green, 10%);
+}
+
+.has-success .radio {
+  color: darken($color-green, 10%);
+}
+
+.has-success .checkbox {
+  color: darken($color-green, 10%);
+}
+
+.has-success .radio-inline {
+  color: darken($color-green, 10%);
+}
+
+.has-success .checkbox-inline {
+  color: darken($color-green, 10%);
+}
+
+.has-success.radio label {
+  color: darken($color-green, 10%);
+}
+
+.has-success.checkbox label {
+  color: darken($color-green, 10%);
+}
+
+.has-success.radio-inline label {
+  color: darken($color-green, 10%);
+}
+
+.has-success.checkbox-inline label {
+  color: darken($color-green, 10%);
+}
+
+// Backgrounds
+.bg-white {
+  background-color: $white;
+}
+
+.bg-light-soft {
+  background-color: $color-background;
+}
+
+.bg-light {
+  background-color: $color-bright;
+}
+
+// Slider
+
+#logo {
+  background-color: $color-navy-blue;
+  float: left;
+  height: 56px;
+  padding: 18px 10px 18px 18px;
+  text-align: center;
+  width: $menu-width;
+
+  span {
+    color: $white;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  &.light-version {
+    background-color: $color-bright;
+    border-bottom: 1px solid $border-color;
+    text-align: center;
+
+    span {
+      color: $color-navy-blue;
+      font-size: 14px;
+      font-weight: 600;
+    }
+  }
+}
+
+.profile-picture {
+  padding: 20px;
+  text-align: center;
+}
+
+.stats-box div {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.stats-label {
+  line-height: 1.2;
+
+  small {
+    font-size: 80%;
+    line-height: .6;
+  }
+}
+
+.stats-box-value {
+  background: lighten($color-bright, 4%);
+}
+
+.stats-box-detail {
+  background: $color-navy-blue;
+  color: $white;
+  position: relative;
+}
+
+// Labels
+.label-menu-corner .label {
+  font-size: 10px;
+  line-height: 12px;
+  padding: 2px 5px;
+  position: absolute;
+  right: 18px;
+  top: 12px;
+}
+
+// Menu
+#side-menu {
+  background: $color-bright;
+
+  li {
+    border-bottom: 1px solid $border-color;
+
+    a {
+      color: $color-text;
+      font-weight: 700;
+      padding: 15px 20px;
+      text-transform: uppercase;
+    }
+
+    &.active {
+      background: $white;
+
+      a {
+        color: $color-navy-blue;
+      }
+    }
+
+    &:first-child {
+      border-top: 1px solid $border-color;
+    }
+
+    &:hover a {
+      color: $color-navy-blue;
+    }
+
+    .nav-second-level {
+      li {
+        a {
+          color: $color-text;
+          font-weight: 600;
+          padding: 10px 10px 10px 30px;
+          text-transform: none;
+        }
+
+        &.active a {
+          background-color: $color-bright;
+          color: $color-navy-blue;
+        }
+      }
+    }
+  }
+
+  > li > a:hover {
+    background: $white;
+  }
+
+  > li > a:focus {
+    background: $white;
+  }
+}
+
+.arrow {
+  float: right;
+}
+
+.fa.arrow::before {
+  content: '\f104';
+}
+
+.active > a > .fa.arrow::before {
+  content: '\f107';
+}
+
+#top-navigation {
+  float: left;
+  height: 56px;
+  position: relative;
+}
+
+.navbar-static-top {
+  margin: 0 0 0 $menu-width;
+}
+
+.navbar.navbar-static-top a {
+  color: lighten($color-text, 20%);
+}
+
+.nav.navbar-nav li a {
+  color: lighten($color-text, 20%);
+}
+
+.header-link {
+  background: $color-bright;
+  border-left: 1px solid $border-color;
+  border-right: 1px solid $border-color;
+  cursor: pointer;
+  float: left;
+  font-size: 14px;
+  margin-right: 15px;
+  padding: 18px 26px 17px;
+}
+
+.header-link:hover {
+  background: darken($color-bright, 2%);
+}
+
+.navbar-nav > li {
+  height: 56px;
+
+  a {
+    height: 56px;
+  }
+
+  > a {
+    font-size: 25px;
+    padding: 15px 20px;
+  }
+}
+
+.navbar-nav > li:last-child > a {
+  padding-right: 35px;
+}
+
+.navbar.navbar-static-top .hide-menu {
+  color: lighten($color-text, 20%);
+}
+
+.panel-title {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+// Box
+.box {
+  padding: 40px;
+}
+
+.box-rb-border {
+  border-bottom: 1px solid $border-color;
+  border-right: 1px solid $border-color;
+}
+
+.box-b-border {
+  border-bottom: 1px solid $border-color;
+}
+
+.box-r-border {
+  border-right: 1px solid $border-color;
+}
+
+// Height
+
+.h-100 {
+  min-height: 100px;
+}
+
+.h-150 {
+  min-height: 150px;
+}
+
+.h-200 {
+  min-height: 200px;
+}
+
+.h-300 {
+  min-height: 300px;
+}
+
+.h-400 {
+  min-height: 400px;
+}
+
+.h-500 {
+  min-height: 500px;
+}
+
+.h-600 {
+  min-height: 600px;
+}
+
+// Sidebar Hide
+
+body {
+  .hide-sidebar {
+    #menu {
+      margin-left: -$menu-width;
+    }
+
+    #wrapper {
+      margin-left: 0;
+    }
+  }
+
+  .page-small {
+    #menu {
+      margin-left: -$menu-width;
+    }
+
+    #wrapper {
+      margin-left: 0;
+    }
+
+    &.show-sidebar #menu {
+      margin-left: 0;
+    }
+
+    &.show-sidebar #wrapper {
+      margin-left: $menu-width;
+    }
+  }
+}
+
+a {
+  color: $color-navy-blue;
+  cursor: pointer;
+
+  &.list-group-item.active {
+    background-color: $color-navy-blue;
+    border-color: $color-navy-blue;
+    color: $white;
+  }
+
+  &.list-group-item.active:hover {
+    background-color: $color-navy-blue;
+    border-color: $color-navy-blue;
+    color: $white;
+  }
+
+  &.list-group-item.active:focus {
+    background-color: $color-navy-blue;
+    border-color: $color-navy-blue;
+    color: $white;
+  }
+
+  &:hover {
+    color: $color-navy-blue;
+    text-decoration: none;
+  }
+
+  &:focus {
+    color: $color-navy-blue;
+    text-decoration: none;
+  }
+}
+
+.no-padding {
+  padding: 0;
+
+  table {
+    margin-bottom: 0;
+  }
+
+  .list-group-item {
+    border-bottom: 0;
+    border-left: 0;
+    border-right: 0;
+
+    &:first-child {
+      border-bottom: 0;
+      border-left: 0;
+      border-right: 0;
+      border-top: 0;
+    }
+  }
+
+  .list-group {
+    margin-bottom: 0;
+  }
+}
+
+.no-borders {
+  border: 0;
+}
+
+.no-margins {
+  margin: 0;
+}
+
+.no-background {
+  background: transparent;
+}
+
+.navbar-form-custom {
+  float: left;
+  height: 52px;
+  padding: 0;
+  width: 180px;
+
+  .form-control {
+    background: none repeat scroll 0 0 $black;
+    border: medium none;
+    font-size: 13px;
+    height: 52px;
+    margin: 0;
+    padding: 0;
+    z-index: 1060;
+
+    &:focus {
+      box-shadow: none;
+    }
+
+    &:hover {
+      box-shadow: none;
+    }
+  }
+}
+
+.form-control {
+  border-color: $border-color;
+  box-shadow: none;
+
+  &.error {
+    border-color: $color-red;
+  }
+}
+
+.form-control:focus {
+  box-shadow: none;
+}
+
+.has-error .form-control:focus {
+  box-shadow: none;
+}
+
+.has-success .form-control:focus {
+  box-shadow: none;
+}
+
+.has-warning .form-control:focus {
+  box-shadow: none;
+}
+
+.navbar-collapse {
+  box-shadow: none;
+}
+
+.navbar-form {
+  box-shadow: none;
+}
+
+.open .btn.dropdown-toggle {
+  box-shadow: none;
+}
+
+.panel {
+  box-shadow: none;
+}
+
+.popover {
+  box-shadow: none;
+}
+
+.progress {
+  box-shadow: none;
+}
+
+.progress-bar {
+  box-shadow: none;
+}
+
+.vertical-mid {
+  display: table;
+
+  * {
+    display: table-cell;
+    vertical-align: middle;
+  }
+}
+
+// Labels
+
+.label-success {
+  background-color: $color-green;
+}
+
+// LIST GROUP
+
+.list-group-item-heading {
+  margin-top: 10px;
+}
+
+.list-group-item-text {
+  color: inherit;
+  line-height: inherit;
+  margin: 0 0 10px;
+}
+
+.list-group-item {
+  background-color: inherit;
+  border: 1px solid $border-color;
+  display: block;
+  margin-bottom: -1px;
+  padding: 10px 15px;
+  position: relative;
+}
+
+.well {
+  background: $color-bright;
+  box-shadow: none;
+}
+
+// Stats
+
+.stats h4 {
+  margin: 5px 0;
+}
+
+h5 {
+  margin: 5px 0;
+}
+
+h6 {
+  margin: 5px 0;
+}
+
+.stats-title h4 {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+// Widths
+
+.w-xs {
+  min-width: 100px;
+}
+
+.w-sm {
+  min-width: 120px;
+}
+
+.w-m {
+  min-width: 140px;
+}
+
+.w-lg {
+  min-width: 160px;
+}
+
+.w-xl {
+  min-width: 180px;
+}
+
+.w-xxl {
+  min-width: 200px;
+}
+
+// Charts
+.flot-chart {
+  display: block;
+  height: 300px;
+  position: relative;
+}
+
+.flot-chart-content {
+  height: 100%;
+  width: 100%;
+}
+
+.stats .flot-chart {
+  height: 60px;
+}
+
+// Messages
+.feed-activity-list .feed-element {
+  border-bottom: 1px solid $border-bottom-message;
+}
+
+.feed-element:first-child {
+  margin-top: 0;
+}
+
+.feed-element {
+  margin-top: 15px;
+  overflow: hidden;
+  padding-bottom: 15px;
+
+  .media {
+    margin-top: 15px;
+  }
+
+  > .pull-left {
+    margin-right: 10px;
+  }
+
+  img {
+    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); // Firefox 10+, Firefox on Android
+    //-webkit-filter: grayscale(100%); // Chrome 19+, Safari 6+, Safari 6+ iOS
+
+    &.img-circle {
+      height: 38px;
+      width: 38px;
+    }
+  }
+
+  .well {
+    border: 1px solid $well-border-color;
+    box-shadow: none;
+    font-size: 11px;
+    line-height: 16px;
+    margin-bottom: 5px;
+    margin-top: 10px;
+    padding: 10px 20px;
+  }
+
+  .actions {
+    margin-top: 10px;
+  }
+
+  .photos {
+    margin: 10px 0;
+  }
+}
+
+.media-body {
+  overflow: hidden;
+}
+
+.dropdown-messages-box {
+  img {
+    &.img-circle {
+      height: 38px;
+      width: 38px;
+    }
+  }
+}
+
+.feed-photo {
+  border-radius: 4px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  max-height: 180px;
+  overflow: hidden;
+}
+
+.small-logo {
+  display: none;
+  font-size: 14px;
+  font-weight: 800;
+  padding-top: 18px;
+  text-align: center;
+}
+
+.img-small {
+  height: 62px;
+  width: 62px;
+}
+
+@media(max-width: 768px) {
+  .navbar-form-custom {
+    display: none;
+  }
+
+  .navbar-right {
+    display: none;
+  }
+
+  #logo {
+    display: none;
+  }
+
+  .navbar-static-top {
+    margin: 0;
+  }
+
+  .small-logo {
+    display: block;
+    float: left;
+  }
+
+  // Demo only
+  .header-line div {
+    display: none;
+  }
+
+  .color-demo .header-line {
+    height: 48px;
+  }
+
+  #hbreadcrumb {
+    float: none;
+    margin-bottom: 10px;
+    margin-top: 0;
+  }
+
+}
+
+@media(max-width: 320px) {
+  #wrapper {
+    overflow: hidden;
+  }
+}
+
+.canvass {
+  transition: width .01s, height .01s;
+}
+
+.project-list table tr td {
+  border-bottom: 1px solid $project-list-td-color;
+  border-top: 0;
+  padding: 10px;
+  vertical-align: middle;
+}
+
+.icons-box {
+  padding: 20px;
+
+  h3 {
+    margin-bottom: 10px;
+    margin-top: 10px;
+  }
+
+  .infont {
+    margin-bottom: 25px;
+    text-align: center;
+
+    i {
+      color: $color-ifont-i;
+      display: block;
+      font-size: 35px;
+    }
+
+    span {
+      color: $color-ifont-span;
+      display: block;
+      margin: 1px;
+    }
+  }
+}
+
+.fullpanel {
+  height: 100%;
+  left: 0;
+  overflow-x: scroll;
+  top: 0;
+  transition: all 2s;
+  width: 100%;
+  z-index: 1070;
+}
+
+.transition {
+  transition: all .5s;
+}
+
+.normalheader {
+  min-width: 320px;
+  padding: 40px 40px 0;
+
+  .hpanel {
+    margin-bottom: 0;
+  }
+
+  h2 {
+    margin-top: 0;
+  }
+}
+
+@media(max-width: 768px) {
+
+  .normalheader {
+    padding: 15px 15px 0;
+  }
+
+}
+
+.input-xs {
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 500;
+  height: 20px;
+  line-height: 1.5;
+  padding: 2px 10px;
+}
+
+.clip-header {
+  background: $color-bright;
+  border-bottom: 1px solid $border-color;
+  border-left: 1px solid $border-color;
+  font-size: 8px;
+  padding: 4px 5px;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  i {
+    display: inline-block;
+    transform: rotate(45deg);
+  }
+}
+
+.dropdown-menu {
+  border-radius: 3px;
+  font-size: 13px;
+}
+
+.dropdown-example {
+  display: inline-block;
+  margin: 0 10px 10px;
+
+  .dropdown-menu {
+    display: block;
+    position: static;
+  }
+}
+
+.pagination-example .pagination {
+  margin: 0 0 10px;
+}
+
+.pagination > .active > a {
+  background-color: $color-blue;
+  border-color: darken($color-blue, 5%);
+  color: $white;
+  cursor: default;
+  z-index: 2;
+}
+
+.pagination > .active > span {
+  background-color: $color-blue;
+  border-color: darken($color-blue, 5%);
+  color: $white;
+  cursor: default;
+  z-index: 2;
+}
+
+.pagination > .active > a:hover {
+  background-color: $color-blue;
+  border-color: darken($color-blue, 5%);
+  color: $white;
+  cursor: default;
+  z-index: 2;
+}
+
+.pagination > .active > span:hover {
+  background-color: $color-blue;
+  border-color: darken($color-blue, 5%);
+  color: $white;
+  cursor: default;
+  z-index: 2;
+}
+
+.pagination > .active > a:focus {
+  background-color: $color-blue;
+  border-color: darken($color-blue, 5%);
+  color: $white;
+  cursor: default;
+  z-index: 2;
+}
+
+.pagination > .active > span:focus {
+  background-color: $color-blue;
+  border-color: darken($color-blue, 5%);
+  color: $white;
+  cursor: default;
+  z-index: 2;
+}
+
+.hbreadcrumb {
+  a {
+    &.active {
+      color: $hbreadcrumb-color;
+    }
+  }
+}
+
+.input-group-addon {
+  background: lighten($color-background, 3%);
+  border-color: $border-color;
+}
+
+.sidebar-button {
+  padding: 4px 10px 0;
+
+  i {
+    font-size: 20px;
+  }
+}
+
+// Splash style
+
+.splash {
+  background: $white;
+  bottom: 0;
+  color: $gray;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 2000;
+}
+
+.splash-title {
+  margin: 15% auto;
+  max-width: 500px;
+  padding: 20px;
+  text-align: center;
+
+  h1 {
+    font-size: 26px;
+  }
+}
+
+// Checkbox styles
+
+@mixin checkbox-variant($parent, $color) {
+  #{$parent} input[type="checkbox"]:checked + label,
+  #{$parent} input[type="radio"]:checked + label {
+    &::before {
+      background-color: $color;
+      border-color: $color;
+    }
+
+    &::after {
+      color: $white;
+    }
+  }
+}
+
+@mixin radio-variant($parent, $color) {
+  #{$parent} input[type="radio"] {
+    + label {
+      &::after {
+        background-color: $color;
+      }
+    }
+
+    &:checked + label {
+      &::before {
+        border-color: $color;
+      }
+
+      &::after {
+        background-color: $color;
+      }
+    }
+  }
+}
+
+@include checkbox-variant('.checkbox-primary', $color-navy-blue);
+@include checkbox-variant('.checkbox-danger', $color-red);
+@include checkbox-variant('.checkbox-info', $color-blue);
+@include checkbox-variant('.checkbox-warning', $color-yellow);
+@include checkbox-variant('.checkbox-success', $color-green);
+@include radio-variant('.radio-primary', $color-navy-blue);
+@include radio-variant('.radio-danger', $color-red);
+@include radio-variant('.radio-info', $color-blue);
+@include radio-variant('.radio-warning', $color-yellow);
+@include radio-variant('.radio-success', $color-green);
+
+.checkbox input:hover,
+.radio input:hover {
+  cursor: pointer;
+}
+
+// UI Sortable
+.ui-sortable .panel-body {
+  cursor: move;
+}
+
+.ui-sortable-placeholder {
+  background: $ui-sortable-placeholder;
+  border: 1px dashed $ui-sortable-placeholder-border-color;
+  visibility: visible;
+}
+
+.ibox.ui-sortable-placeholder {
+  margin: 0 0 23px;
+}
+
+// Badge colors
+
+.badge.badge-success {
+  background-color: $color-green;
+}
+
+.badge.badge-info {
+  background-color: $color-blue;
+}
+
+.badge.badge-danger {
+  background-color: $color-red;
+}
+
+.badge.badge-warning {
+  background-color: $color-yellow;
+}
+
+.badge.badge-primary {
+  background-color: $color-navy-blue;
+}
+
+// Tables
+
+.table > thead > tr > th {
+  border-bottom: 0;
+}
+
+// Validation
+
+label {
+  .error {
+    color: $color-red;
+    font-weight: 400;
+    margin: 5px 0 0;
+
+    &::before {
+      content: '\f071';
+      font-family: 'FontAwesome', Georgia, Serif;
+      margin: 0 4px;
+    }
+  }
+
+  span {
+    &.error {
+      color: $color-red;
+      font-weight: 400;
+      margin: 5px 0 0;
+      margin-left: 5px;
+    }
+  }
+}
+
+// File manager
+
+.hpanel .panel-body.file-body {
+  padding: 30px 0;
+  text-align: center;
+}
+
+.file-body {
+  i {
+    &.fa {
+      font-size: 56px;
+    }
+  }
+}
+
+// Filter search
+.filter-item {
+  margin-bottom: 0;
+
+  .panel-body {
+    border-bottom: 0;
+    padding: 10px 20px;
+  }
+
+  a {
+    color: $color-text;
+  }
+
+  &:last-child {
+    border-bottom: 1px solid $border-color;
+  }
+
+  &:hover {
+    .panel-body {
+      background: $filter-body-panel-bg;
+      box-shadow: 0 2px 3px $filter-body-panel-shadow;
+      z-index: 100;
+    }
+  }
+
+  &.active {
+    .panel-body {
+      background: $filter-body-panel-bg;
+      box-shadow: 0 2px 3px $filter-body-panel-shadow;
+      z-index: 100;
+    }
+  }
+
+  h4 {
+    margin-bottom: 5px;
+  }
+}
+
+.filter-item::selection {
+  .panel-body {
+    background: $filter-body-panel-bg;
+  }
+}
+
+// Big menu
+
+.hdropdown.bigmenu {
+  padding: 30px 30px 0;
+}
+
+.bigmenu {
+  a {
+    display: block;
+    margin: 0 10px 30px 0;
+    min-width: 100px;
+    text-align: center;
+
+    i {
+      font-size: 46px;
+    }
+  }
+
+  h5 {
+    font-size: 13px;
+    margin-top: 10px;
+  }
+}
+
+// Notes page
+@media (min-width: 991px) {
+  #notes {
+    display: block;
+    height: auto;
+    visibility: visible;
+  }
+
+}
+
+#notes .panel-body:first-child {
+  border-top: 0;
+}
+
+.note-content textarea {
+  border: 0;
+  min-height: 360px;
+  padding: 0;
+  width: 100%;
+}
+
+.note-link {
+
+  h5 {
+    margin-top: 0;
+  }
+
+  &:hover {
+    background: $color-bright;
+  }
+
+}
+
+// App Plans
+
+.plan-box {
+  opacity: .7;
+  transform: scale(.85);
+  transition: all .2s ease 0s;
+
+  &.active {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &:hover {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// Mobile navbar
+
+@media (max-width: 768px) {
+  .mobile-menu-toggle {
+    display: block;
+  }
+
+  .mobile-menu {
+    .navbar-nav {
+      float: none;
+
+      > li {
+        float: none;
+      }
+    }
+  }
+}
+
+.mobile-navbar {
+  background-color: $white;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 62px;
+  z-index: 100;
+
+  .navbar-nav {
+    border-bottom: 1px solid $border-color;
+    margin: 0;
+    padding: 0;
+
+    > li {
+      > a {
+        color: $color-text;
+        font-size: 14px;
+        padding: 15px;
+      }
+
+      > a:hover {
+        border-bottom: 0;
+      }
+
+      > a:focus {
+        border-bottom: 0;
+      }
+    }
+
+    .open {
+      > a {
+        border-bottom: 0;
+      }
+
+      > a:hover {
+        border-bottom: 0;
+      }
+
+      > a:focus {
+        border-bottom: 0;
+      }
+    }
+  }
+}
+
+@media (min-width: 769px) {
+  .mobile-navbar {
+    display: none;
+  }
+
+  .mobile-navbar.collapse.in {
+    display: none;
+  }
+
+}
+
+// CodeMirror
+
+.code-mirror {
+  border: 1px solid $code-mirror-border-color;
+  height: auto;
+}
+
+.code-mirror-scroll {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+// Fix for xeditable and chekcbox plugin in angularJS version
+.x-edit-checkbox .checkbox label::before {
+  display: none;
+}

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);
+}

src/sass/utils/_variables.scss

 @charset 'UTF-8';
+
+// Color Variables
+$primary-color: rgb(35, 137, 215);
+$primary-color--hover: darken($primary-color, 10%);
+$bg--gray: rgb(245, 245, 245);
+$white: rgb(255, 255, 255);
+$black: rgb(0, 0, 0);
+$red: rgb(229, 101, 101);
+$yellow: rgb(255, 255, 0);
+$light-gray: rgba(0, 0, 0, .15);
+$gray: rgba(0, 0, 0, .3);
+$dark-gray: rgba(0, 0, 0, .5);
+
+// Random variables
+$border-rad: 1px;
+
+// Alert component variables
+//------ PRE-DEFINED TEMPLATES VARS
+$color-navy-blue: #34495e;
+$color-violet: #9b59b6;
+$color-blue: #3498db;
+$color-green: #62cb31;
+$color-yellow: #ffb606;
+$color-orange: #e67e22;
+$color-red: #e74c3c;
+$color-red-deep: #c0392b;
+
+// Additional colors
+$color-text: #6a6c6f;
+$color-bright: #f7f9fa;
+$color-background: #f1f3f6;
+$color-background-boxed: lighten($color-background, 3%);
+$border-color: #e4e5e7;
+
+// Additional variables
+$menu-width: 180px;
+$main-transition: all .1s ease-out 0s;
+//------ PRE-DEFINED TEMPLATES VARS
+$black-opacity-p1: rgba(0, 0, 0, .1);
+$black-opacity-p2: rgba(0, 0, 0, .2);
+$sweet-alert-btn-color: #34495e;
+$sweet-alert-btn-color-hover: #a1d9f2;
+$sweet-alert-btn-color-active: #81ccee;
+$sweet-alert-btn-rgba-focus-p1: rgba(128, 179, 235, .5);
+$sweet-alert-btn-rgba-focus-p2: rgba(0, 0, 0, .05);
+$sweet-alert-btn-cancel: #d0d0d0;
+$sweet-alert-btn-cancel-hover: #c8c8c8;
+$sweet-alert-btn-cancel-active: #b6b6b6;
+$table-children-border-bottom-color: #ddd;
+$bg-event-row-color: #f9f9f9;
+// Alert component variables
+
+// Page Variables
+$border-gray: 1px solid $table-children-border-bottom-color;
+// Tabs Variables
+$border-color-tabs-state: #eee;
+// Modal Variables
+$color-shadow-modal-content1: rgba(0, 0, 0, .1);
+$color-shadow-modal-content2: rgba(0, 0, 0, .2);
+// Various Variables
+$border-bottom-message: #e7eaec;
+$well-border-color: #e7eaec;
+$project-list-td-color: #e7eaec;
+$color-ifont-i: #676a6c;
+$color-ifont-span: #a6a8a9;
+$hbreadcrumb-color: #9d9fa2;
+$ui-sortable-placeholder: #f7f9fa;
+$ui-sortable-placeholder-border-color: #cecece;
+$filter-body-panel-bg: #fafcfd;
+$filter-body-panel-shadow: rgba(0, 0, 0, .175);
+$code-mirror-border-color: #eee;