Theme styles added and useless files rm

src/app/theme/sass/_blur-admin-theme.scss

@@ -0,0 +1,23 @@
+.label {
+  border-radius: 0;
+}
+
+.label-primary {
+  background: $primary;
+}
+
+.label-info {
+  background: $primary-light;
+}
+
+.label-success {
+  background: $success;
+}
+
+.label-warning {
+  background: $warning;
+}
+
+.label-danger {
+  background: $danger;
+}

src/app/theme/sass/_buttons.scss

@@ -0,0 +1,279 @@
+$hover: 24;
+.btn:focus, .btn:active:focus, .btn.active:focus,
+.btn.focus, .btn:active.focus, .btn.active.focus {
+  outline: none;
+}
+
+.btn {
+  border-radius: 5px;
+  transition: all 0.1s ease;
+}
+
+.btn:hover {
+  transform: scale(1.2);
+}
+
+@mixin styleButton($color, $borderColor) {
+  background: $color;
+  border-color: $borderColor;
+}
+
+@mixin buttonColor($color, $borderColor) {
+  @include styleButton($color, $borderColor);
+
+  &.disabled, &[disabled], fieldset[disabled] &, &.disabled:hover, &[disabled]:hover,
+  fieldset[disabled] &:hover, &.disabled:focus, &[disabled]:focus, fieldset[disabled] &:focus,
+  &.disabled.focus, &[disabled].focus, fieldset[disabled] &.focus, &.disabled:active,
+  &[disabled]:active, fieldset[disabled] &:active, &.disabled.active, &[disabled].active,
+  fieldset[disabled] &.active {
+    @include styleButton($color, $borderColor + $hover/2);
+    &:hover {
+      transform: none;
+    }
+  }
+
+  &:hover, &:focus, &.focus, &:active, &.active {
+    @include styleButton($color, $borderColor - $hover);
+  }
+}
+
+.open > .btn.dropdown-toggle {
+  &.btn.btn-primary {
+    @include styleButton($primary, $primary - $hover);
+    background-color: $primary-dark;
+    border-color: $primary-dark;
+  }
+  &.btn-default {
+    @include styleButton(transparent, $default);
+    &:focus, &:active:hover, &.active:hover, &:hover{
+      background-color: rgba(0, 0, 0, 0.2);
+      color: $default;
+    }
+  }
+  &.btn-success {
+    @include styleButton($success, $success - $hover);
+  }
+  &.btn-info {
+    @include styleButton($info, $info - $hover);
+  }
+  &.btn-warning {
+    @include styleButton($warning, $warning - $hover);
+  }
+  &.btn-danger {
+    @include styleButton($danger, $danger - $hover);
+  }
+}
+
+.dropdown button.btn.btn-default.dropdown-toggle {
+  color: #fff;
+}
+
+.bootstrap-select {
+  .dropdown-toggle:focus {
+    outline: none !important;
+  }
+  button.btn-default:focus {
+    color: $default;
+  }
+  .btn {
+    transition: none;
+  }
+}
+
+button.btn.btn-primary {
+  @include buttonColor($primary, $primary);
+  &:active, &:target {
+    background-color: $primary-dark;
+  }
+}
+
+button.btn.btn-default {
+  border-width: 1px;
+  @include buttonColor(transparent, $default);
+  &:active, &:target {
+    background-color: rgba(0, 0, 0, 0.2);
+    color: $default;
+  }
+}
+
+button.btn.btn-success {
+  @include buttonColor($success, $success);
+  &:active, &:target {
+    background-color: $success-dark;
+  }
+}
+
+button.btn.btn-info {
+  @include buttonColor($info, $info);
+  &:active, &:target {
+    background-color: $info-dark;
+  }
+}
+
+button.btn.btn-warning {
+  @include buttonColor($warning, $warning);
+  &:active, &:target {
+    background-color: $warning-dark;
+  }
+}
+
+button.btn.btn-danger {
+  @include buttonColor($danger, $danger);
+  &:active, &:target {
+    background-color: $danger-dark;
+  }
+}
+
+
+button.btn.btn-inverse {
+  @include buttonColor($help-text, $help-text);
+  color: $default;
+  &:active, &:target, &:hover {
+    background-color: $help-text;
+    color: $default;
+  }
+}
+
+
+
+.btn-with-icon {
+  i {
+    margin-right: 10px;
+  }
+}
+
+.btn-group, .btn-toolbar {
+  :hover {
+    transform: none;
+  }
+}
+
+@mixin buttonGroupColor($color) {
+  border-color: $color - $hover/2;
+  &:hover {
+    border-color: $color - $hover;
+  }
+}
+
+.btn-group {
+  button.btn.btn-primary {
+    @include buttonGroupColor($primary);
+  }
+  button.btn.btn-default {
+    @include buttonGroupColor($default);
+  }
+  button.btn.btn-danger {
+    @include buttonGroupColor($danger);
+  }
+  button.btn.btn-info {
+    @include buttonGroupColor($info);
+  }
+  button.btn.btn-success {
+    @include buttonGroupColor($success);
+  }
+  button.btn.btn-warning {
+    @include buttonGroupColor($warning);
+  }
+  .dropdown-menu {
+    margin-top: 0px;
+  }
+}
+
+.btn-toolbar {
+  display: inline-block;
+}
+
+.btn .caret {
+  margin-left: 2px;
+}
+
+@mixin progressButtonColor($btnColor) {
+  border-radius: 0;
+  .content {
+    &:after, &:before {
+      color: darken($btnColor, 40);
+    }
+  }
+
+  &.progress-button-style-move-up, &.progress-button-style-slide-down {
+    .content {
+      background-color: darken($btnColor, 10);
+    }
+  }
+
+  &.progress-button-style-lateral-lines .progress-inner {
+    border-color: darken($btnColor, 10);
+    background: 0 0;
+  }
+
+  .progress {
+    background-color: darken($btnColor, 10);
+    box-shadow: 0 1px 0 darken($btnColor, 10);
+  }
+
+  .progress-inner {
+    background-color: darken($btnColor, 20);
+  }
+  &.progress-button-perspective {
+    background: none;
+    .content {
+      background-color: $btnColor;
+    }
+  }
+}
+
+button.progress-button {
+
+  .progress {
+    margin-bottom: 0;
+    border-radius: 0;
+  }
+  &:hover {
+    transform: none;
+  }
+
+  &.progress-button-style-shrink.btn.disabled.progress-button-dir-horizontal:hover {
+    transform: scaleY(.3);
+  }
+  &.progress-button-style-shrink.btn.disabled.progress-button-dir-vertical:hover {
+    transform: scaleX(.1);
+  }
+
+  &.btn.btn-primary {
+    @include progressButtonColor($primary);
+  }
+
+  &.btn.btn-default {
+    @include progressButtonColor($default);
+  }
+
+  &.btn.btn-success {
+    @include progressButtonColor($success);
+  }
+
+  &.btn.btn-info {
+    @include progressButtonColor($info);
+  }
+
+  &.btn.btn-warning {
+    @include progressButtonColor($warning);
+  }
+
+  &.btn.btn-danger {
+    @include progressButtonColor($danger);
+  }
+}
+
+.btn-raised {
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
+}
+
+.btn-mm {
+  padding: 5px 11px;
+  font-size: 13px;
+}
+
+.btn-xm {
+  padding: 8px 14px;
+  font-size: 16px;
+}

src/app/theme/sass/_icons.scss

@@ -0,0 +1,40 @@
+@mixin svg-icon($url, $width:'', $height:'') {
+  display: inline-block;
+  background: url($url) no-repeat center;
+  background-size: contain;
+  vertical-align: middle;
+  @if ($width != '') {
+    width: $width + px;
+  }
+  @if ($height != '') {
+    height: $height + px;
+  }
+}
+
+@mixin svg-icon-class($iconName, $width:'', $height:'') {
+  .#{'i-' + $iconName} {
+    @include svg-icon($images-root + $iconName + '.svg', $width, $height);
+  }
+}
+
+@include svg-icon-class('face', 80, 80);
+@include svg-icon-class('money', 80, 80);
+@include svg-icon-class('person', 80, 80);
+@include svg-icon-class('refresh', 80, 80);
+
+
+@mixin png-icon($url, $width, $height) {
+  display: inline-block;
+  width: $width + px;
+  height: $height + px;
+  background: url($url) no-repeat center center;
+  background-size: $width + px $height + px;
+}
+
+@mixin png-icon-class($iconName, $width, $height) {
+  .#{'i-' + $iconName} {
+    @include png-icon($images-root + $iconName + '.png', $width, $height);
+  }
+}
+
+//@include icon-png-class('arrival-icon', 11, 11);

src/app/theme/sass/_layout.scss

@@ -0,0 +1,201 @@
+$left-space: 180px;
+
+@include scrollbars(.5em, #d9d9d9, rgba(0,0,0,0));
+
+html {
+  position: relative;
+  min-width: 320px;
+}
+
+html, body {
+  min-height: 100%;
+  min-width: $resMin;
+}
+
+body {
+  font: 14px/16px $font-family;
+  color: white;
+  @include main-background();
+}
+
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
+{
+  html{
+    overflow: hidden;
+    height: 100%;
+  }
+  body{
+    overflow: auto;
+    height: 100%;
+  }
+}
+
+a {
+  transition: color 0.5s ease;
+  outline: 0 !important;
+}
+
+.body-bg{
+  display: none;
+}
+.al-header {
+  display: block;
+  height: 49px;
+  margin: 0;
+  background-repeat: repeat-x;
+  position: relative;
+  z-index: 905;
+  color: #444444;
+}
+
+.al-main {
+  margin-left: $left-space;
+  padding: 66px 0 34px 0;
+  min-height: 500px;
+}
+
+.al-footer {
+  height: 34px;
+  padding: 0px 18px 0 $left-space;
+  width: 100%;
+  position: absolute;
+  display: block;
+  bottom: 0;
+  font-size: 13px;
+  color: #ffffff;
+  transition: padding-left 0.5s ease;
+}
+
+.al-footer-main {
+  float: left;
+  margin-left: 15px;
+}
+
+.al-copy {
+  float: left;
+}
+
+.al-footer-right {
+  float: right;
+  margin-right: 12px;
+  i {
+    margin: 0 4px;
+    color: $warning;
+    font-size: 12px;
+  }
+  a {
+    margin-left: 4px;
+    color: #ffffff;
+    &:hover {
+      color: $warning;
+    }
+  }
+}
+
+.al-share {
+  margin: -6px 0 0 12px;
+  padding: 0;
+  list-style: none;
+  float: left;
+  li {
+    list-style: none;
+    float: left;
+    margin-left: 16px;
+    i {
+      cursor: pointer;
+      transition: all 0.1s ease;
+      color: #ffffff;
+      padding: 6px;
+      box-sizing: content-box;
+      font-size: 16px;
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+    i.fa-facebook-square {
+      color: $facebook-color;
+    }
+    i.fa-twitter-square {
+      color: $twitter-color;
+    }
+    i.fa-google-plus-square {
+      color: $google-color;
+    }
+  }
+}
+
+.al-content {
+  padding: 8px 32px 8px 40px;
+}
+
+@media screen and (max-width: $resXS) {
+  .al-content {
+    padding: 8px 20px;
+  }
+}
+
+.vis-hidden {
+  visibility: hidden;
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
+
+.icon-up, .icon-down {
+  width: 5px;
+  height: 13px;
+  display: block;
+}
+
+.icon-up {
+  @include bg-nr('arrow-green-up.svg');
+}
+
+.icon-down {
+  @include bg-nr('arrow-red-down.svg');
+}
+
+.disable-text-selection {
+  -webkit-touch-callout: none;
+  user-select: none;
+}
+
+.align-right {
+  text-align: right
+}
+
+.amcharts-chart-div > a {
+  font-size: 6px !important;
+}
+
+.content-panel {
+  padding-left: 22px;
+  padding-top: 26px;
+}
+
+@media (max-width: 590px) {
+  .al-footer-right {
+    float: none;
+    margin-bottom: 19px;
+    margin-right: 0;
+  }
+  .al-footer {
+    height: 76px;
+    text-align: center;
+  }
+  .al-main {
+    padding-bottom: 76px;
+  }
+  .al-footer-main {
+    float: none;
+    display: inline-block;
+  }
+}
+
+.full-invisible {
+  visibility: hidden!important;
+  * {
+    visibility: hidden!important;
+  }
+}

src/app/theme/sass/_preloader.scss

@@ -0,0 +1,77 @@
+@-webkit-keyframes spin {
+  0% {
+    transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
+  }
+  100% {
+    transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
+  }
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg); /* Firefox 16+*/
+  }
+  100% {
+    -moz-transform: rotate(360deg); /* Firefox 16+*/
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
+  }
+  100% {
+    transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
+  }
+}
+
+#preloader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  background: #000000;
+  backface-visibility: hidden;
+  & > div {
+    display: block;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    width: 150px;
+    height: 150px;
+    margin: -75px 0 0 -75px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: $danger;
+    backface-visibility: hidden;
+    transform: translate3d(0, 0, 0);
+    backface-visibility: hidden;
+    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+    &:before {
+      content: "";
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      right: 5px;
+      bottom: 5px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: $primary;
+      -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
+      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+    }
+    &:after {
+      content: "";
+      position: absolute;
+      top: 15px;
+      left: 15px;
+      right: 15px;
+      bottom: 15px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: $warning;
+      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
+    }
+  }
+}

src/app/theme/sass/_socicon.scss

@@ -0,0 +1,70 @@
+@font-face {
+  font-family: 'socicon';
+  src: url('#{$fonts-root}socicon.eot');
+  src: url('#{$fonts-root}socicon.eot?#iefix') format('embedded-opentype'),
+  url('#{$fonts-root}socicon.woff') format('woff'),
+  url('#{$fonts-root}socicon.woff2') format('woff2'),
+  url('#{$fonts-root}socicon.ttf') format('truetype'),
+  url('#{$fonts-root}socicon.svg#sociconregular') format('svg');
+  font-weight: $font-normal;
+  font-style: normal;
+  text-transform: initial;
+}
+
+.socicon {
+  font-family: 'socicon' !important;
+}
+
+.socicon {
+  position: relative;
+  top: 1px;
+  display: inline-block;
+  font-family: 'socicon';
+  font-style: normal;
+  font-weight: $font-normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+}
+
+.socicon:empty {
+  width: 1em;
+}
+
+@mixin socicon($background, $content) {
+  background-color: $background;
+  &:before {
+    content: $content;
+  }
+}
+
+.socicon-twitter {
+  @include socicon($twitter-color, "a");
+}
+
+.socicon-facebook {
+  @include socicon($facebook-color, "b");
+}
+
+.socicon-google {
+  @include socicon($google-color, "c");
+}
+
+.socicon-linkedin {
+  @include socicon($linkedin-color, "j");
+}
+
+.socicon-github {
+  @include socicon($github-color, "Q");
+}
+
+.socicon-stackoverflow {
+  @include socicon($stackoverflow-color, "(");
+}
+
+.socicon-dribble {
+  @include socicon($dribble-color, "D");
+}
+
+.socicon-behace {
+  @include socicon($behace-color, "H");
+}

src/app/theme/sass/_table.scss

@@ -0,0 +1,324 @@
+.table {
+  margin-bottom: 0px;
+  & > thead {
+    & > tr {
+      & > th {
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        white-space: nowrap;
+        &:first-child {
+          text-align: center;
+        }
+        &:last-child {
+          padding-right: 16px;
+        }
+      }
+    }
+  }
+  & > tbody {
+    & > tr {
+      & > tr:first-child {
+        padding-top: 1px;
+      }
+      & > td {
+        padding: 0px 8px;
+        line-height: 35px;
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        &:first-child {
+          text-align: center;
+        }
+        &:last-child {
+          padding-right: 16px !important;
+        }
+      }
+    }
+  }
+  &.table-bordered {
+    border-color: rgba(255, 255, 255, 0.2) !important;
+    th, td {
+      border-color: rgba(255, 255, 255, 0.2) !important;
+    }
+  }
+}
+
+.table-id {
+  text-align: left !important;
+  width: 40px;
+}
+
+.table-arr {
+  width: 5px;
+  padding: 10px 8px 8px 0 !important;
+}
+
+.table-no-borders {
+  border: none;
+  td, th, tr {
+    border: none !important;
+  }
+}
+
+.editable-wrap .btn-group.form-control {
+  background-color: transparent;
+}
+
+.editable-tr-wrap {
+  .editable-wrap {
+    vertical-align: super;
+  }
+  .editable-controls input.editable-input {
+    width: 110px;
+  }
+  td {
+    width: 20%;
+  }
+}
+
+.editable-table-button {
+  width: 70px;
+}
+
+.add-row-editable-table {
+  margin-bottom: 10px;
+}
+
+.add-row-editable-table + table {
+  margin-bottom: 5px;
+}
+
+.select-page-size-wrap {
+  width: 150px;
+}
+
+.table .header-row th {
+  vertical-align: middle;
+  padding: 0 8px;
+}
+
+tr.editable-row {
+  input.form-control {
+    vertical-align: middle;
+  }
+}
+
+.select-td .editable-select {
+  margin-bottom: 1px;
+}
+
+@media screen and (max-width: 1199px) {
+  .editable-tr-wrap {
+    .editable-wrap {
+      vertical-align: middle;
+    }
+  }
+}
+
+.browser-icons {
+  width: 41px;
+}
+
+.st-sort-ascent, .st-sort-descent {
+  position: relative;
+}
+
+.st-sort-ascent:after, .st-sort-descent:after {
+  width: 0;
+  height: 0;
+  border-bottom: 4px solid $default-text;
+  border-top: 4px solid transparent;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  margin-bottom: 2px;
+}
+
+.st-sort-descent:after {
+  transform: rotate(-180deg);
+  margin-bottom: -2px;
+}
+
+.sortable {
+  th {
+    cursor: pointer;
+    &:after {
+      content: '';
+      display: inline-block;
+      width: 8px;
+      margin-left: 8px;
+    }
+  }
+}
+
+a.email-link {
+  color: $default;
+  &:hover {
+    color: $danger;
+  }
+}
+
+input.search-input {
+  margin-left: -8px;
+  padding-left: 8px;
+}
+
+.table .pagination {
+  margin: 4px 0 -12px 0;
+  a {
+    cursor: pointer;
+  }
+}
+
+.vertical-scroll {
+  max-height: 214px;
+}
+
+.pagination > li > a, .pagination > li > span {
+  background: transparent;
+}
+
+.pagination > li:first-child > a, .pagination > li:first-child > span {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.pagination > li:last-child > a, .pagination > li:last-child > span {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.status-button {
+  width: 60px;
+}
+
+.table {
+  .editable-wrap .editable-controls, .editable-wrap .editable-error {
+    vertical-align: sub;
+    .btn {
+      &.dropdown-toggle {
+        padding: 3px 20px;
+        margin-top: 3px;
+      }
+      padding: 3px 8px;
+    }
+    input {
+      line-height: 1px;
+      height: 30px;
+    }
+  }
+}
+
+.form-inline button[type="submit"].editable-table-button {
+  margin-left: 0;
+}
+
+body.badmin-transparent {
+  .table {
+    & > thead {
+      & > tr {
+        & > th {
+          border-bottom: none;
+        }
+      }
+    }
+    & > tbody {
+      & > tr.no-top-border {
+        &:first-child > td {
+          border-top: none;
+        }
+      }
+    }
+  }
+
+  .black-muted-bg {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .table-hover {
+    tr:hover {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .table-striped > tbody > tr:nth-of-type(odd) {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  .table > tbody > tr.primary > td {
+    background-color: rgba($primary,0.7);
+    border: none;
+  }
+  .table > tbody > tr.success > td {
+    background-color: rgba($success,0.7);
+    border: none;
+  }
+  .table > tbody > tr.warning > td {
+    background-color: rgba($warning,0.7);
+    border: none;
+  }
+  .table > tbody > tr.danger > td {
+    background-color: rgba($danger,0.7);
+    border: none;
+  }
+  .table > tbody > tr.info > td {
+    background-color: rgba($info,0.7);
+    border: none;
+  }
+
+  .editable-click, a.editable-click {
+    color: $default;
+    border-bottom: dashed 1px $default;
+  }
+}
+
+th {
+  font-weight: $font-normal;
+}
+
+.editable-empty {
+  color: $danger-dark;
+}
+
+.table > tbody > tr > th {
+  border: none;
+}
+
+.table-striped > tbody > tr > td {
+  border: none;
+}
+.pagination > li > a,
+.pagination > li > span{
+  color: $default;
+  border-color: $default;
+}
+
+
+.pagination > li:first-of-type > a,
+.pagination > li:first-of-type > span{
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.pagination > li:last-of-type > a,
+.pagination > li:last-of-type > span{
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.pagination > .active > a,
+.pagination > .active > span,
+.pagination > .active > a:hover,
+.pagination > .active > span:hover,
+.pagination > .active > a:focus,
+.pagination > .active > span:focus {
+  background-color: $primary;
+  border-color: $default;
+}
+
+.pagination > li > a:hover,
+.pagination > li > span:hover,
+.pagination > li > a:focus,
+.pagination > li > span:focus{
+  background-color: rgba(0,0,0,.2);
+  color: $default;
+}
+
+.editable-buttons .btn-with-icon i {
+   margin-right: 0;
+}

src/app/theme/sass/conf/_colorScheme.scss

@@ -0,0 +1,23 @@
+$primary: #209e91 !default;
+$info: #2dacd1 !default;
+$success: #90b900 !default;
+$warning: #dfb81c !default;
+$danger: #e85656 !default;
+
+$primary-light: tint($primary, 30%);
+$info-light: tint($info, 30%);
+$success-light: tint($success, 30%);
+$warning-light: tint($warning, 30%);
+$danger-light: tint($danger, 30%);
+
+$primary-dark: shade($primary, 15%);
+$info-dark: shade($info, 15%);
+$success-dark: shade($success, 15%);
+$warning-dark: shade($warning, 15%);
+$danger-dark: shade($danger, 15%);
+
+$primary-bg: tint($primary, 20%);
+$info-bg: tint($info, 20%);
+$success-bg: tint($success, 20%);
+$warning-bg: tint($warning, 20%);
+$danger-bg: tint($danger, 20%);

src/app/theme/sass/conf/_mixins.scss

@@ -0,0 +1,128 @@
+/// Slightly lighten a color
+/// @access public
+/// @param {Color} $color - color to tint
+/// @param {Number} $percentage - percentage of `$color` in returned color
+/// @return {Color}
+@function tint($color, $percentage) {
+  @return mix(white, $color, $percentage);
+}
+
+/// Slightly darken a color
+/// @access public
+/// @param {Color} $color - color to shade
+/// @param {Number} $percentage - percentage of `$color` in returned color
+/// @return {Color}
+@function shade($color, $percentage) {
+  @return mix(black, $color, $percentage);
+}
+
+@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {
+  ::-webkit-scrollbar {
+    width: $size;
+    height: $size;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: $foreground-color;
+    cursor: pointer;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: $background-color;
+  }
+
+  // For Internet Explorer
+  body {
+    scrollbar-face-color: $foreground-color;
+    scrollbar-track-color: $background-color;
+  }
+}
+
+@mixin bg-nr($relativeUrl) {
+  background: url($images-root + $relativeUrl) no-repeat 0 0;
+}
+@mixin bg($relativeUrl) {
+  background: url($images-root + $relativeUrl);
+}
+
+@mixin bg-image($relativeUrl) {
+  background-image: url($images-root + $relativeUrl);
+}
+
+@mixin main-background() {
+  $mainBgUrl: $images-root + 'blur-bg.jpg';
+
+  &::before {
+    content: '';
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: url($mainBgUrl) no-repeat center center;
+    background-size: cover;
+    will-change: transform;
+    z-index: -1;
+  }
+}
+
+@mixin bg-translucent-dark($opacity) {
+  background: rgba(0, 0, 0, $opacity);
+}
+
+@mixin placeholderStyle($color, $opacity) {
+  &::-webkit-input-placeholder {
+    color: $color;
+    opacity: $opacity;
+  }
+  &:-moz-placeholder {
+    /* Firefox 18- */
+    color: $color;
+    opacity: $opacity;
+  }
+  &::-moz-placeholder {
+    /* Firefox 19+ */
+    color: $color;
+    opacity: $opacity;
+  }
+  &:-ms-input-placeholder {
+    color: $color;
+    opacity: $opacity;
+  }
+}
+
+@mixin overrideColors($color) {
+  p,
+  h1,h2,h3,h4,h5,h6,
+  .pie-chart-item,
+  .panel-heading>.dropdown .dropdown-toggle,
+  .panel-title,
+  ol.blur span,
+  ul.blur,
+  .popular-app-cost,
+  .popular-app-info,
+  .panel-title>.small,
+  .panel-title>.small>a,
+  .panel-title>a,
+  .panel-title>small,
+  .panel-title>small>a,
+  .traffic-text span,
+  .form-group label,
+  .help-block{
+    color: $color;
+  }
+  .feed-message .message-time, .text-muted {
+    color: darken($color, 20);
+  }
+}
+
+@mixin overridePanelBg($color, $borderColor, $dropdownColor) {
+  .panel.panel-blur, .panel.panel-blur:hover {
+    border-color: $borderColor;
+    background-color: $color;
+  }
+
+  .progress {
+    background: $color;
+  }
+}

src/app/theme/sass/conf/_variables.scss

@@ -0,0 +1,59 @@
+$font-family: 'Roboto', sans-serif;
+
+$view-total :rgba(0,0,0,.4);
+
+$activelink: $primary;
+$hoverlink: $primary-dark;
+
+$default: #ffffff !default;
+
+$facebook-color: #3b5998;
+$twitter-color: #55acee;
+$google-color: #dd4b39;
+$linkedin-color: #0177B5;
+$github-color: #6b6b6b;
+$stackoverflow-color: #2F96E8;
+$dribble-color: #F26798;
+$behace-color: #0093FA;
+
+$panel-bg: #f8f8f8;
+$panel-bg-hover: #fff;
+
+$disabled: #bdbdbd;
+$disabled-bg: #e6e6e6;
+
+$default-text: #7b7b7b;
+$help-text: #949494;
+
+$border: #dddddd;
+$border-light: #eeeeee;
+$input-border: #cccccc;
+
+$resXXL: 1280px;
+$resXL: 1170px;
+$resL: 991px;
+$resM: 768px;
+$resS: 660px;
+$resXS: 500px;
+$resXXS: 435px;
+$resMin: 320px;
+
+$top-height: 66px;
+
+$small-panel-height: 114px;
+$xsmall-panel-height: 187px;
+$medium-panel-height: 400px;
+$extra-medium-panel-height: 550px;
+$large-panel-height: 974px;
+
+$default-animation-duration: 0.2s;
+$default-animation-style: ease-out;
+
+$assets-root: '../assets/';
+$images-root: $assets-root + 'img/';
+$fonts-root: $assets-root + 'fonts/';
+$font-thin: 100;
+$font-light: 300;
+$font-normal: 400;
+$font-bold: 700;
+$font-ultraBold: 900;

src/app/theme/sass/conf/conf.scss

@@ -0,0 +1,3 @@
+@import 'mixins';
+@import 'colorScheme';
+@import 'variables';