chore(colors): add example with new color scheme

feat(colors): refactor color scheme structure
chore(version): update version to v1.1.1
2016-04-18 18:07:16 +03:00 · 2016-04-18 18:00:16 +03:00 · 2016-04-11 19:07:52 +03:00 · 2016-04-11 18:05:17 +03:00 · 2016-04-11 17:35:35 +03:00 · 2016-04-11 17:35:07 +03:00
43 changed files with 386 additions and 289 deletions
--- a/LICENSE.txt
+++ b/LICENSE.txt
@@ -0,0 +1,10 @@
+The MIT License (MIT)
+Copyright (c) 2016 Akvemus GSC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+Status API Training Shop Blog About
+© 2016 GitHub, Inc. Terms Privacy Security Contact Help
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Blur Admin HTML template

-Admin template made with ♥ by Akveo team.
+Admin template made with ♥ by [Akveo team](http://akveo.com/).

 We put a lot of efforts to bring together latest and the most trending web design approaches, while creating this template.
 Every color, character or image was carefully selected by our team to provide the best experience possible.
@@ -8,10 +8,38 @@ We're very proud of it and like it very much. We also hope that you will enjoy i

 It's just a first version, but we will continue development of this template to create not just another bootstrap customization, but the whole HTML framework that can be applied in a lot of places.

-## Installlation
+## Theme Demo
+![alt tag](http://i.imgur.com/yOZPlps.jpg)
+**[Template Demo](http://akveo.com/blur-admin/#/dashboard)**
+
+## Installation

 To build the template from scratch you will be required to have following tools
 * Download and install nodejs [https://nodejs.org](https://nodejs.org)
 * Open the console inside of extracted folder and run `npm install` to fetch all dependencies
 * Run `gulp` to build sources
-* That's it! Go to `release\` folder in check out your freshly made compiled files!
+* Go to `release\` folder in check out your freshly made compiled files
+* Run `gulp serve` and enjoy the beauty!
+ 
+## Features
+* Responsive layout
+* High resolution
+* Bootstrap CSS Framework
+* Sass
+* Gulp build
+* AngularJS
+* Jquery
+* Jquery ui
+* Charts (amChart, Chartist, Chart.js, Morris)
+* Maps (Google, Leaflet, amMap)
+* etc
+
+License
+-------------
+<a href=/LICENSE.txt" target="_blank">MIT</a> license.
+
+### From akveo
+
+Enjoy!
+
+Made with ♥ by [Akveo team](http://akveo.com/).
--- a/example.jpg
+++ b/example.jpg
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
  "name": "blur-admin",
-  "version": "0.0.0",
+  "version": "1.1.1",
  "homepage": "https://github.com/1itvinka/blur-admin",
  "authors": [
    "akveo"
@@ -46,6 +46,7 @@
    "angular-ui-router": "~0.2.15",
    "angular-chart.js": "~0.8.8",
    "angular-chartist.js": "~3.3.12",
+    "chartist": "0.9.5",
    "angular-morris-chart": "~1.1.0",
    "ionrangeslider": "~2.1.2",
    "angular-bootstrap": "~0.14.3",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "blur_admin",
-  "version": "0.0.1",
+  "version": "1.1.1",
  "devDependencies": {
    "estraverse": "~4.1.0",
    "gulp": "~3.9.0",
--- a/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js
+++ b/src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js
@@ -42,8 +42,8 @@
        "id": "g3",
        color: layoutColors.default,
        "valueAxis": "v1",
-        "lineColor": layoutColors.primaryBg,
-        "fillColors": layoutColors.primaryBg,
+        "lineColor": layoutColors.primaryLight,
+        "fillColors": layoutColors.primaryLight,
        "fillAlphas": 0.8,
        "lineAlpha": 0.8,
        "type": "column",
--- a/src/app/pages/charts/chartist/chartistCtrl.js
+++ b/src/app/pages/charts/chartist/chartistCtrl.js
@@ -30,8 +30,6 @@
      ]
    };

-
-
    $scope.areaLineData = {
      labels: [1, 2, 3, 4, 5, 6, 7, 8],
      series: [
@@ -236,9 +234,6 @@
      new Chartist.Pie('#simple-pie', $scope.simplePieData, $scope.simplePieOptions, $scope.pieResponsive);
      new Chartist.Pie('#label-pie', $scope.labelsPieData, $scope.labelsPieOptions);
      new Chartist.Pie('#donut', $scope.simpleDonutData, $scope.simpleDonutOptions, $scope.donutResponsive);
-    }, 100);
-
-
+    });
  }
-
 })();
--- a/src/app/pages/charts/charts.module.js
+++ b/src/app/pages/charts/charts.module.js
@@ -23,7 +23,7 @@
          title: 'Charts',
          sidebarMeta: {
            icon: 'ion-stats-bars',
-            order: 400,
+            order: 150,
          },
        });
  }
--- a/src/app/pages/components/components.module.js
+++ b/src/app/pages/components/components.module.js
@@ -22,7 +22,7 @@
          title: 'Components',
          sidebarMeta: {
            icon: 'ion-gear-a',
-            order: 150,
+            order: 100,
          },
        });
  }
--- a/src/app/pages/components/mail/composeBox/compose.html
+++ b/src/app/pages/components/mail/composeBox/compose.html
@@ -16,7 +16,7 @@
    <text-angular name="htmlcontent" ta-target-toolbars='toolbarMain,toolbarFooter' ng-model="boxCtrl.text"></text-angular>
  </div>
 </div>
-<div class="compose-footer">
+<div class="compose-footer clearfix">
  <button type="button" ng-click="$dismiss()" class="btn btn-send">Send</button>
  <text-angular-toolbar ta-toolbar-class="toolbarFooter" name="toolbarFooter" ta-toolbar="[['insertLink', 'insertImage', 'html', 'quote','insertVideo']]"></text-angular-toolbar>
  <div class="footer-controls">
--- a/src/app/pages/dashboard/blurFeed/BlurFeedCtrl.js
+++ b/src/app/pages/dashboard/blurFeed/BlurFeedCtrl.js
@@ -94,7 +94,7 @@
        author: 'Alexander',
        surname: 'Demeshko',
        header: 'Posted new message',
-        text: '“I mean, they say you die twice. One time when you stop breathing and a second time, a bit later on, when somebody says your name for the last time." © Banksy',
+        text: '“I mean, they say you die twice. One time when you stop breathing and a second time, a bit later on, when somebody says your name for the last time." ©',
        time: '15.11.2015',
        ago: '6 days ago',
        expanded: false,
--- a/src/app/pages/dashboard/dashboardCalendar/DashboardCalendarCtrl.js
+++ b/src/app/pages/dashboard/dashboardCalendar/DashboardCalendarCtrl.js
@@ -10,6 +10,7 @@

  /** @ngInject */
  function DashboardCalendarCtrl(layoutColors) {
+    var palette = layoutColors.bgColorPalette;
    var $element = $('#calendar').fullCalendar({
      //height: 335,
      header: {
@@ -39,23 +40,23 @@
        {
          title: 'All Day Event',
          start: '2016-03-01',
-          color: layoutColors.successCharts
+          color: palette.silverTree
        },
        {
          title: 'Long Event',
          start: '2016-03-07',
          end: '2016-03-10',
-          color: layoutColors.primaryCharts
+          color: palette.blueStone
        },
        {
          title: 'Dinner',
          start: '2016-03-14T20:00:00',
-          color: layoutColors.infoCharts
+          color: palette.surfieGreen
        },
        {
          title: 'Birthday Party',
          start: '2016-04-01T07:00:00',
-          color: layoutColors.warningCharts
+          color: palette.gossipDark
        }
      ]
    });
--- a/src/app/pages/dashboard/dashboardTodo/DashboardTodoCtrl.js
+++ b/src/app/pages/dashboard/dashboardTodo/DashboardTodoCtrl.js
@@ -70,7 +70,7 @@
        markId: 1
      },
      {
-        text: 'Write email to contact@akveo.com',
+        text: 'Write email to business cat',
        edit: false,
        markId: 3
      },
--- a/src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js
+++ b/src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js
@@ -9,46 +9,52 @@
      .controller('TrafficChartCtrl', TrafficChartCtrl);

  /** @ngInject */
-  function TrafficChartCtrl(layoutColors) {
-    var doughnutData = [
+  function TrafficChartCtrl(layoutColors, $scope) {
+    var palette = layoutColors.bgColorPalette;
+    $scope.doughnutData = [
      {
        value: 2000,
-        color: layoutColors.defaultCharts,
-        highlight: "#f1f1f1",
-        label: 'Ad Campaigns'
-      },
-      {
+        color: palette.white,
+        highlight: palette.whiteDark,
+        label: 'Ad Campaigns',
+        percentage: 87,
+        order: 0,
+      }, {
        value: 1500,
-        color: layoutColors.primaryCharts,
-        highlight: "#136775",
-        label: 'Search engines'
-      },
-      {
+        color: palette.blueStone,
+        highlight: palette.blueStoneDark,
+        label: 'Search engines',
+        percentage: 22,
+        order: 4,
+      }, {
        value: 1000,
-        color: layoutColors.infoCharts,
-        highlight: "#13998a",
-        label: 'Direct Traffic'
-      },
-      {
+        color: palette.surfieGreen,
+        highlight: palette.surfieGreenDark,
+        label: 'Referral Traffic',
+        percentage: 70,
+        order: 3,
+      }, {
        value: 1200,
-        color: layoutColors.successCharts,
-        highlight: "#94d7a1",
-        label: 'Referral Traffic'
-      },
-      {
+        color: palette.silverTree,
+        highlight: palette.silverTreeDark,
+        label: 'Direct Traffic',
+        percentage: 38,
+        order: 2,
+      }, {
        value: 400,
-        color: layoutColors.warningCharts,
-        highlight: "#dcfcc4",
-        label: 'Other'
-      }
+        color: palette.gossip,
+        highlight: palette.gossipDark,
+        label: 'Other',
+        percentage: 17,
+        order: 1,
+      },
    ];

    var ctx = document.getElementById('chart-area').getContext('2d');
-    window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
+    window.myDoughnut = new Chart(ctx).Doughnut($scope.doughnutData, {
      segmentShowStroke: false,
      percentageInnerCutout : 64,
      responsive: true
    });
-
  }
 })();
--- a/src/app/pages/dashboard/trafficChart/trafficChart.html
+++ b/src/app/pages/dashboard/trafficChart/trafficChart.html
@@ -14,61 +14,16 @@

  <div class="channels-info">
    <div>
-
-      <div class="channels-info-item">
-        <div class="legend-color default"></div>
-        <p>Ad Campaigns<span class="channel-number">+87%</span></p>
+      <div class="channels-info-item" ng-repeat="item in doughnutData | orderBy:'order'">
+        <div class="legend-color" style="background-color: {{::item.color}}"></div>
+        <p>{{::item.label}}<span class="channel-number">+{{item.percentage}}%</span></p>
        <div class="progress progress-sm channel-progress">
          <div class="progress-bar " role="progressbar"
-               aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width: 87%">
+               aria-valuenow="{{item.percentage}}" aria-valuemin="0" aria-valuemax="100" style="width: {{item.percentage}}%">
          </div>
        </div>
      </div>
-
-      <div class="channels-info-item">
-        <div class="legend-color warning"></div>
-        <p>Ohter<span class="channel-number">+17%</span></p>
-        <div class="progress progress-sm channel-progress">
-          <div class="progress-bar " role="progressbar"
-               aria-valuenow="17" aria-valuemin="0" aria-valuemax="100" style="width: 17%">
-          </div>
-        </div>
-      </div>
-
-      <div class="channels-info-item">
-        <div class="legend-color success"></div>
-        <p>Direct Traffic<span class="channel-number">+38%</span></p>
-        <div class="progress progress-sm channel-progress">
-          <div class="progress-bar " role="progressbar"
-               aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" style="width: 38%">
-          </div>
-        </div>
-      </div>
-
-      <div class="channels-info-item">
-        <div class="legend-color info"></div>
-        <p>Referral Traffic<span class="channel-number">+70%</span></p>
-        <div class="progress progress-sm channel-progress">
-          <div class="progress-bar " role="progressbar"
-               aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
-          </div>
-        </div>
-      </div>
-
-      <div class="channels-info-item">
-        <div class="legend-color primary"></div>
-        <p>Search engines<span class="channel-number">+22%</span></p>
-        <div class="progress progress-sm channel-progress">
-          <div class="progress-bar " role="progressbar"
-               aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="width: 42%">
-          </div>
-        </div>
-      </div>
-
-
-
    </div>
  </div>
-
 </div>

--- a/src/app/pages/form/form.module.js
+++ b/src/app/pages/form/form.module.js
@@ -18,7 +18,7 @@
          title: 'Form Elements',
          sidebarMeta: {
            icon: 'ion-compose',
-            order: 200,
+            order: 250,
          },
        })
        .state('form.inputs', {
--- a/src/app/pages/profile/ProfilePageCtrl.js
+++ b/src/app/pages/profile/ProfilePageCtrl.js
@@ -26,11 +26,12 @@
    $scope.socialProfiles = [
      {
        name: 'Facebook',
-        href: 'https://www.facebook.com/nasta.kartul',
+        href: 'https://www.facebook.com/akveo/',
        icon: 'socicon-facebook'
      },
      {
        name: 'Twitter',
+        href: 'https://twitter.com/akveo_inc',
        icon: 'socicon-twitter'
      },
      {
@@ -39,12 +40,12 @@
      },
      {
        name: 'LinkedIn',
-        href: 'https://www.linkedin.com/profile/view?id=177497038',
+        href: 'https://www.linkedin.com/company/akveo',
        icon: 'socicon-linkedin'
      },
      {
        name: 'GitHub',
-        href: 'https://github.com/1itvinka',
+        href: 'https://github.com/akveo',
        icon: 'socicon-github'
      },
      {
--- a/src/app/pages/profile/profile.html
+++ b/src/app/pages/profile/profile.html
@@ -42,7 +42,7 @@
          <label for="inputLastName" class="col-sm-3 control-label">Last Name</label>

          <div class="col-sm-9">
-            <input type="text" class="form-control" id="inputLastName" placeholder="" value="Tyshkavets">
+            <input type="text" class="form-control" id="inputLastName" placeholder="" value="">
          </div>
        </div>
      </div>
@@ -101,7 +101,7 @@
          <label for="inputEmail3" class="col-sm-3 control-label">Email</label>

          <div class="col-sm-9">
-            <input type="email" class="form-control" id="inputEmail3" placeholder="" value="tyshkavets@gmail.com">
+            <input type="email" class="form-control" id="inputEmail3" placeholder="" value="contact@akveo.com">
          </div>
        </div>
        <div class="form-group row clearfix">
--- a/src/app/pages/ui/tabs/sideTabs.html
+++ b/src/app/pages/ui/tabs/sideTabs.html
@@ -6,7 +6,7 @@
        Take up one idea.
      </p>

-      <div class="kameleon-icon with-round-bg danger"><img ng-src="{{::( 'Key' | kameleonImg )}}"></div>
+      <div class="kameleon-icon-tabs kameleon-icon with-round-bg danger"><img ng-src="{{::( 'Key' | kameleonImg )}}"></div>
      <p>
        People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a
        way to succeed. </p>
@@ -45,7 +45,7 @@
        Take up one idea.
      </p>

-      <div class="kameleon-icon with-round-bg warning"><img ng-src="{{::( 'Phone-Booth' | kameleonImg )}}"></div>
+      <div class="kameleon-icon-tabs kameleon-icon with-round-bg warning"><img ng-src="{{::( 'Phone-Booth' | kameleonImg )}}"></div>
      <p>
        People who succeed have momentum. The more they succeed, the more they want to succeed, and the more they find a
        way to succeed. </p>
--- a/src/app/pages/ui/ui.module.js
+++ b/src/app/pages/ui/ui.module.js
@@ -30,7 +30,7 @@
          title: 'UI Features',
          sidebarMeta: {
            icon: 'ion-android-laptop',
-            order: 100,
+            order: 200,
          },
        });
  }
--- a/src/app/theme/components/baPanel/baPanelBlur.directive.js
+++ b/src/app/theme/components/baPanel/baPanelBlur.directive.js
@@ -9,7 +9,7 @@
      .directive('baPanelBlur', baPanelBlur);

  /** @ngInject */
-  function baPanelBlur(baPanelBlurHelper, $window, $document) {
+  function baPanelBlur(baPanelBlurHelper, $window, $rootScope) {
    var bodyBgSize;

    baPanelBlurHelper.bodyBgLoad().then(function() {
@@ -23,14 +23,16 @@
    return {
      restrict: 'A',
      link: function($scope, elem) {
-        baPanelBlurHelper.bodyBgLoad().then(function() {
-          setTimeout(recalculatePanelStyle);
-        });
-        $window.addEventListener('resize', recalculatePanelStyle);
+        if(!$rootScope.$isMobile) {
+          baPanelBlurHelper.bodyBgLoad().then(function () {
+            setTimeout(recalculatePanelStyle);
+          });
+          $window.addEventListener('resize', recalculatePanelStyle);

-        $scope.$on('$destroy', function() {
-          $window.removeEventListener('resize', recalculatePanelStyle);
-        });
+          $scope.$on('$destroy', function () {
+            $window.removeEventListener('resize', recalculatePanelStyle);
+          });
+        }

        function recalculatePanelStyle() {
          if (!bodyBgSize) {
--- a/src/app/theme/components/baPanel/baPanelBlurHelper.service.js
+++ b/src/app/theme/components/baPanel/baPanelBlurHelper.service.js
@@ -11,7 +11,7 @@
  /** @ngInject */
  function baPanelBlurHelper($q) {
    var res = $q.defer();
-    var computedStyle = getComputedStyle(document.body);
+    var computedStyle = getComputedStyle(document.body, ':before');
    var image = new Image();
    image.src = computedStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');
    image.onerror = function() {
@@ -28,6 +28,7 @@
    this.getBodyBgImageSizes = function() {
      var elemW = document.documentElement.clientWidth;
      var elemH = document.documentElement.clientHeight;
+      if(elemW <= 640) return;
      var imgRatio = (image.height / image.width);       // original img ratio
      var containerRatio = (elemH / elemW);     // container ratio

--- a/src/app/theme/components/msgCenter/msgCenter.html
+++ b/src/app/theme/components/msgCenter/msgCenter.html
@@ -16,7 +16,7 @@
      </div>
      <div class="msg-list">
        <a href class="clearfix" ng-repeat="msg in notifications">
-          <div class="img-area"><img ng-src="{{::( msg.image ||  (users[msg.userId].name | profilePicture) )}}"></div>
+          <div class="img-area"><img ng-class="{'photo-msg-item' : !msg.image}" ng-src="{{::( msg.image ||  (users[msg.userId].name | profilePicture) )}}"></div>
          <div class="msg-area">
            <div ng-bind-html="getMessage(msg)"></div>
            <span>{{ msg.time }}</span>
@@ -40,7 +40,7 @@
      </div>
      <div class="msg-list">
        <a href class="clearfix" ng-repeat="msg in messages">
-          <div class="img-area"><img ng-src="{{::( users[msg.userId].name | profilePicture )}}"></div>
+          <div class="img-area"><img class="photo-msg-item" ng-src="{{::( users[msg.userId].name | profilePicture )}}"></div>
          <div class="msg-area">
            <div>{{ msg.text }}</div>
            <span>{{ msg.time }}</span>
--- a/src/app/theme/directives/zoomIn.js
+++ b/src/app/theme/directives/zoomIn.js
@@ -14,7 +14,7 @@
      link: function ($scope, elem) {
        var delay = 1000;

-        if ($rootScope.$pageLoaded) {
+        if ($rootScope.$pageFinishedLoading) {
          delay = 100;
        }

--- a/src/app/theme/services/preloader.js
+++ b/src/app/theme/services/preloader.js
@@ -11,11 +11,20 @@
  /** @ngInject */
  function preloader($q) {
    return {
-      load: function (src) {
+      loadImg: function (src) {
        var d = $q.defer();
        var img = new Image();
        img.src = src;
-        img.onload = d.resolve;
+        img.onload = function(){
+          d.resolve();
+        };
+        return d.promise;
+      },
+      loadAmCharts : function(){
+        var d = $q.defer();
+        AmCharts.ready(function(){
+          d.resolve();
+        });
        return d.promise;
      }
    }
--- a/src/app/theme/theme.constants.js
+++ b/src/app/theme/theme.constants.js
@@ -7,38 +7,66 @@

  var IMAGES_ROOT = 'assets/img/';

+  // main color scheme
+  var colorScheme = {
+    primary: '#209e91',
+    info: '#2dacd1',
+    success: '#90b900',
+    warning: '#dfb81c',
+    danger: '#e85656',
+  };
+
+  // background color palette
+  var bgColorPalette = {
+    blueStone: '#005562',
+    surfieGreen: '#0e8174',
+    silverTree: '#6eba8c',
+    gossip: '#b9f2a1',
+    white: '#ffffff',
+  };
+
  angular.module('BlurAdmin.theme')
    .constant('layoutColors', {
-      primary: '#209e91',
-      info: '#2dacd1',
-      success: '#90b900',
-      warning: '#dfb81c',
-      danger: '#e85656',
+      primary: colorScheme.primary,
+      info: colorScheme.info,
+      success: colorScheme.success,
+      warning: colorScheme.warning,
+      danger: colorScheme.danger,
+
+      primaryLight: tint(colorScheme.primary, 30),
+      infoLight: tint(colorScheme.info, 30),
+      successLight: tint(colorScheme.success, 30),
+      warningLight: tint(colorScheme.warning, 30),
+      dangerLight: tint(colorScheme.danger, 30),
+
+      primaryDark: shade(colorScheme.primary, 15),
+      infoDark: shade(colorScheme.info, 15),
+      successDark: shade(colorScheme.success, 15),
+      warningDark: shade(colorScheme.warning, 15),
+      dangerDark: shade(colorScheme.danger, 15),
+
+      primaryBg: tint(colorScheme.primary, 20),
+      infoBg: tint(colorScheme.info, 20),
+      successBg: tint(colorScheme.success, 20),
+      warningBg: tint(colorScheme.warning, 20),
+      dangerBg: tint(colorScheme.danger, 20),
+
      default: '#ffffff',
-      successLight: '#85BA54',
-      primaryLight: '#5FBCBB',
-      warningLight: '#c5d36a',
+      defaultText: '#ffffff',

-      primaryDark: '#17857a',
-      dangerDark: '#c24848',
-      successDark: '#7b9e00',
-      warningDark: '#c6a315',
-      infoDark: '#258ead',
+      bgColorPalette: {
+        blueStone: bgColorPalette.blueStone,
+        surfieGreen: bgColorPalette.surfieGreen,
+        silverTree: bgColorPalette.silverTree,
+        gossip: bgColorPalette.gossip,
+        white: bgColorPalette.white,

-      primaryBg: '#63cec3',
-      infoBg: '#5abfdd',
-      successBg: '#b5d448',
-      warningBg: '#e8ca52',
-      dangerBg: '#f67171',
-
-      primaryCharts: '#005562',
-      successCharts: '#6eba8c',
-      infoCharts: '#0e8174',
-      warningCharts: '#b9f2a1',
-      dangerCharts: '#ffa76d',
-      defaultCharts: '#ffffff',
-
-      defaultText: '#ffffff'
+        blueStoneDark: shade(bgColorPalette.blueStone, 15),
+        surfieGreenDark: shade(bgColorPalette.surfieGreen, 15),
+        silverTreeDark: shade(bgColorPalette.silverTree, 15),
+        gossipDark: shade(bgColorPalette.gossip, 15),
+        whiteDark: shade(bgColorPalette.white, 5),
+      },
    })
    .constant('layoutSizes', {
      resWidthCollapseSidebar: 1200,
@@ -53,4 +81,32 @@
      }
    });

+  function shade(color, weight) {
+    return mix('#000000', color, weight);
+  }
+
+  function tint(color, weight) {
+    return mix('#ffffff', color, weight);
+  }
+
+  //SASS mix function
+  function mix(color1, color2, weight) {
+    // convert a decimal value to hex
+    function d2h(d) {
+      return d.toString(16);
+    }
+    // convert a hex value to decimal
+    function h2d(h) {
+      return parseInt(h, 16);
+    }
+
+    var result = "#";
+    for(var i = 1; i < 7; i += 2) {
+      var color1Part = h2d(color1.substr(i, 2));
+      var color2Part = h2d(color2.substr(i, 2));
+      var resultPart = d2h(Math.floor(color2Part + (color1Part - color2Part) * (weight / 100.0)));
+      result += ('0' + resultPart).slice(-2);
+    }
+    return result;
+  }
 })();
--- a/src/app/theme/theme.run.js
+++ b/src/app/theme/theme.run.js
@@ -6,34 +6,33 @@
  'use strict';

  angular.module('BlurAdmin.theme')
-      .run(themeRun);
+    .run(themeRun);

  /** @ngInject */
  function themeRun($timeout, $rootScope, layoutSizes, layoutPaths, preloader, $q) {

-    $q.all([
-      preloader.load(layoutPaths.images.root + 'blur-bg.jpg'),
-      preloader.load(layoutPaths.images.root + 'blur-bg-blurred.jpg')
-    ]).then(function(){
-      if(!$rootScope.$pageFinishedLoading){
-        $rootScope.$pageFinishedLoading = true;
-      }
-      if(!$rootScope.$pageLoaded){
-        $rootScope.$pageLoaded = true;
-      }
+    $rootScope.$isMobile =  (/android|webos|iphone|ipad|ipod|blackberry|windows phone/).test(navigator.userAgent.toLowerCase());
+    var whatToWait = [
+      preloader.loadAmCharts(),
+      $timeout(3000)
+    ];
+
+    if ($rootScope.$isMobile) {
+      whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg-mobile.jpg'));
+    } else {
+      whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg.jpg'));
+      whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg-blurred.jpg'));
+    }
+
+    $q.all(whatToWait).then(function () {
+      $rootScope.$pageFinishedLoading = true;
    });

    $timeout(function () {
-      if(!$rootScope.$pageFinishedLoading){
+      if (!$rootScope.$pageFinishedLoading) {
        $rootScope.$pageFinishedLoading = true;
      }
-    }, 2000);
-
-    $timeout(function () {
-      if(!$rootScope.$pageLoaded){
-        $rootScope.$pageLoaded = true;
-      }
-    }, 4000);
+    }, 7000);

    $rootScope.$isMenuCollapsed = window.innerWidth <= layoutSizes.resWidthCollapseSidebar;
  }
--- a/src/assets/img/blur-bg-mobile.jpg
+++ b/src/assets/img/blur-bg-mobile.jpg
--- a/src/index.html
+++ b/src/index.html
@@ -24,7 +24,8 @@
  <!-- endinject -->
  <!-- endbuild -->
 </head>
-<body>
+<body ng-class="{'mobile' : $isMobile}">
+<div class="body-bg"></div>
 <main ng-if="$pageFinishedLoading" ng-class="{ 'menu-collapsed': $isMenuCollapsed }">

  <sidebar></sidebar>
--- a/src/sass/app/_alerts.scss
+++ b/src/sass/app/_alerts.scss
@@ -27,18 +27,18 @@
 .bg-success {
  background-color: rgba($success,0.85);
  a{
-    color: $primary-charts;
+    color: $danger;
    &:hover{
-      color: $primary-dark;
+      color: $danger-dark;
    }
  }
 }
 .bg-info {
  background-color: rgba($info,0.85);
  a{
-    color: $warning-bg;
+    color: $warning;
    &:hover{
-      color: $warning;
+      color: $warning-dark;
    }
  }
 }
--- a/src/sass/app/_email.scss
+++ b/src/sass/app/_email.scss
@@ -729,7 +729,7 @@
 }

 .modal .modal-dialog.modal-compose {
-  width: 398px;
+  max-width: 398px;
  position: fixed;
  bottom: 0;
  right: 0;
@@ -738,6 +738,7 @@
  .form-control, .bootstrap-tagsinput input {
    @include placeholderStyle($default-text, 1);
    color: $default-text;
+    border-radius: 0;
  }
  .ta-toolbar {
    .btn {
@@ -754,6 +755,12 @@
  @include overrideColors($default-text)
 }

+@media (max-width: 640px) {
+  .modal .modal-dialog.modal-compose {
+    max-height: 600px;
+  }
+}
+
 body.badmin-transparent {
  .mail-navigation-container {
    overflow: hidden;
--- a/src/sass/app/_form.scss
+++ b/src/sass/app/_form.scss
@@ -135,7 +135,6 @@ textarea.form-control {
  }
  &.bootstrap-switch-focused {
    box-shadow: none;
-    border-color: $input-border-focus;
    &.bootstrap-switch-off {
      border-color: $input-border;
    }
--- a/src/sass/app/_iconsPage.scss
+++ b/src/sass/app/_iconsPage.scss
@@ -33,31 +33,54 @@ a.see-all-icons {
  float: right;
 }

-.awesomeIcons{
+.awesomeIcons {
  height: 308px;
 }

 .kameleon-row {
+  display: inline-block;
+  min-width: 102px;
  width: 20%;
-  float: left;
-  min-height: 80px;
-  position: relative;
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-bottom: 12px;
-  & > div {
-    width: 70%;
+  .kameleon-icon {
+    padding:0 10px;
+    img {
+      width: 81px;
+    }
+  }
+}
+
+@media (max-width: 750px) {
+  .kameleon-row {
+    width: 25%;
+  }
+}
+
+@media (max-width: 550px) {
+  .kameleon-row {
+    width: 33%;
+  }
+}
+
+@media (max-width: 430px) {
+  .kameleon-row {
+    width: 50%;
+  }
+}
+
+.kameleon-icon-tabs {
+  max-width: 84px;
+  img {
+    width: 100%;
+    min-width: 81px;
+    min-height: 81px;
  }
 }

 .kameleon-icon {
  text-align: center;
  margin: 0 auto;
-  max-width: 84px;
  img {
    width: 100%;
-    min-width: 81px;
-    min-height: 82px;
  }
  span {
    display: block;
@@ -97,9 +120,4 @@ a.see-all-icons {
  }
 }

-@media (max-width: 1500px) and (min-width: $resL), (max-width: $resS) {
-  .kameleon-row {
-    width: 25%;
-  }
-}

--- a/src/sass/app/_typography.scss
+++ b/src/sass/app/_typography.scss
@@ -57,7 +57,7 @@ h5 {
    }

    .panel.with-scroll .panel-body{
-      height: 100%;
+      height: calc(100% - 45px);
    }

    .panel-content{
@@ -334,6 +334,7 @@ a.learn-more {
  height: 400px;
  img {
    height: 100%;
+    width: 100%;
    display: block
  }
 }
@@ -422,7 +423,7 @@ a.learn-more {

 .panel.banner-column-panel {
  padding: 0;
-  margin-bottom: 50px;
+  margin-bottom: 90px;

  .panel-body{
    padding: 0;
--- a/src/sass/common.scss
+++ b/src/sass/common.scss
@@ -1,2 +1,3 @@
@import 'theme/conf/mixins';
+@import 'theme/conf/colorScheme';
@import 'theme/conf/variables';
--- a/src/sass/theme/_layout.scss
+++ b/src/sass/theme/_layout.scss
@@ -18,6 +18,7 @@ body {
  @include main-background();
 }

+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
 {
  html{
@@ -35,6 +36,9 @@ a {
  outline: 0 !important;
 }

+.body-bg{
+  display: none;
+}
 .al-header {
  display: block;
  height: 49px;
--- a/src/sass/theme/_preloader.scss
+++ b/src/sass/theme/_preloader.scss
@@ -6,6 +6,14 @@
    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% {
--- a/src/sass/theme/components/_msgCenter.scss
+++ b/src/sass/theme/components/_msgCenter.scss
@@ -148,7 +148,9 @@
        img {
          width: 36px;
          height: 36px;
-          border-radius: 4px;
+          &.photo-msg-item{
+            border-radius: 18px;
+          }
        }
        & > div {
          width: 36px;
--- a/src/sass/theme/conf/_colorScheme.scss
+++ b/src/sass/theme/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%);
--- a/src/sass/theme/conf/_mixins.scss
+++ b/src/sass/theme/conf/_mixins.scss
@@ -51,8 +51,19 @@

@mixin main-background() {
  $mainBgUrl: $images-root + 'blur-bg.jpg';
-  background: url($mainBgUrl) no-repeat center center fixed;
-  background-size: cover;
+
+  &::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) {
--- a/src/sass/theme/conf/_variables.scss
+++ b/src/sass/theme/conf/_variables.scss
@@ -1,41 +1,12 @@
 $font-family: 'Roboto', sans-serif;

-$default: #ffffff !default;
-$primary: #209e91 !default;
-$info: #2dacd1 !default;
-$success: #90b900 !default;
-$warning: #dfb81c !default;
-$danger: #e85656 !default;
-
-$primary-light: #5FBCBB;
-$success-light: #85BA54;
-
-$primary-dark:  #17857a;
-$info-dark:  #258ead;
-$success-dark:  #7b9e00;
-$warning-dark:  #c6a315;
-$danger-dark:  #c24848;
-
-$primary-bg:  #63cec3;
-$info-bg:  #5abfdd;
-$success-bg:  #b5d448;
-$warning-bg:  #e8ca52;
-$danger-bg:  #f67171;
-
-$primary-charts :#005562;
-$success-charts :#6eba8c;
-$info-charts    :#0e8174;
-$warning-charts :#b9f2a1;
-$danger-charts  :#ffa76d;
-$default-charts :#ffffff;
-
 $view-total :rgba(0,0,0,.4);

-
-$accent: #E3FF53;
 $activelink: $primary;
 $hoverlink: $primary-dark;

+$default: #ffffff !default;
+
 $facebook-color: #3b5998;
 $twitter-color: #55acee;
 $google-color: #dd4b39;
@@ -57,7 +28,6 @@ $help-text: #949494;
 $border: #dddddd;
 $border-light: #eeeeee;
 $input-border: #cccccc;
-$input-border-focus: #1488b0;

 $resXXL: 1280px;
 $resXL: 1170px;
--- a/src/sass/theme/dashboard/_trafficChart.scss
+++ b/src/sass/theme/dashboard/_trafficChart.scss
@@ -116,67 +116,8 @@
  top: 27px;
  border-radius: 15px;
  left: -45px;
-  &.info{
-    background-color: $info-charts;
-  }
-  &.success{
-    background-color: $success-charts;
-  }
-  &.danger{
-    background-color: $danger-charts;
-  }
-  &.default{
-    background-color: $default;
-  }
-  &.warning{
-    background-color: $warning-charts;
-  }
-  &.primary{
-    background-color: $primary-charts;
-  }
 }

-//@mixin doughnut-size($size) {
-//  .traffic-chart .canvas-holder {
-//    width: $size;
-//    height: $size;
-//    canvas {
-//      width: $size;
-//      height: $size;
-//    }
-//  }
-//}
-
-//@media (max-width: $resS) {
-//  @include doughnut-size(250px);
-//  .canvas-holder {
-//    float: none;
-//  }
-//  .traffic-legend {
-//    display: block;
-//    padding: 10px 0 0;
-//    width: 300px;
-//  }
-//  ul.doughnut-legend {
-//    padding-left: 20px;
-//    li {
-//      &:nth-child(2n-1) {
-//        float: left;
-//      }
-//    }
-//  }
-//  .traffic-chart{
-//    width: 100%;
-//  }
-//  .canvas-holder{
-//    display: block;
-//    margin: 0 auto;
-//  }
-//  .panel.medium-panel.traffic-panel{
-//    height: inherit;
-//  }
-//}
-
 .traffic-chart canvas{
  border: 10px solid rgba(0,0,0,0.0);
  border-radius: 150px;
@@ -226,9 +167,36 @@
  }
 }

+
+@media (max-width: 380px){
+
+  .traffic-chart{
+    width: 240px;
+  }
+
+  .canvas-holder{
+    width: 240px;
+    height: 240px;
+  }
+
+  .chart-bg {
+    top: 30px;
+  }
+}
+@media (max-width: 320px){
+  .chart-bg {
+    left: 50px;
+    top: 50px;
+    width: 142px;
+    height: 142px;
+  }
+}
+
+
 body.badmin-transparent{
  .traffic-chart canvas{
    border: 10px solid rgba(0,0,0,0.35);
+    box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
    border-radius: 150px;
  }
 }
--- a/src/sass/theme/skins/_02_transparent.scss
+++ b/src/sass/theme/skins/_02_transparent.scss
@@ -1,6 +1,22 @@
 body.badmin-transparent {
+  &.mobile{
+    background: none;
+    .body-bg{
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      @include main-background();
+      background-attachment: inherit;
+    }
+    .panel-blur {
+      background: transparent;
+    }
+  }
  @include overrideColors(#fff);
-  @include overridePanelBg(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
+  @include overridePanelBg(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
  .default-color {
    color: $default-text !important;;
  }
@@ -12,6 +28,10 @@ body.badmin-transparent {
    .panel-heading {
      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
      box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
+      transform: translate3d(0,0,0);
+    }
+    .panel-body {
+      transform: translate3d(0,0,0);
    }
  }
  .btn-default {
Author	SHA1	Message	Date
Konstantin Danovsky	e1f9ca7b0e	chore(colors): add example with new color scheme	2016-04-18 18:07:16 +03:00
KostyaDanovsky	b669dd4758	feat(colors): refactor color scheme structure	2016-04-18 18:00:16 +03:00
KostyaDanovsky	e34dfffac8	chore(version): update version to v1.1.1	2016-04-11 19:07:52 +03:00
KostyaDanovsky	662c5dc529	fix(charts): set 0.9.5 version for the chartist library Closes #5	2016-04-11 18:05:17 +03:00
KostyaDanovsky	cc5cdde2fb	Merge branch 'fixed-bg-performance'	2016-04-11 17:35:35 +03:00
Vladimir Lugovsky	3f8d5b4721	fix(scrolling): attempt to fix scrolling performance for blur panels	2016-04-11 17:35:07 +03:00
KostyaDanovsky	13aa88edfc	fix(dashboard): fix typo Closes #7	2016-04-11 11:53:10 +03:00
Andrei Hrabouski	7fa9756045	Merge pull request #3 from polo2ro/patch-1 Update README.md	2016-04-09 15:00:32 +03:00
Paul	927803247c	Update README.md	2016-04-09 13:53:47 +02:00
Andrei Hrabouski	ed7aa477fe	Update README.md	2016-04-08 18:16:45 +03:00
alex	b33e9b8283	fix(blurFeed): fix message copyright	2016-04-08 18:14:33 +03:00
Andrei Hrabouski	1402167eea	Create LICENSE.txt	2016-04-08 18:11:36 +03:00
Anastasiya	7b4bd2fb55	fix(profile): add akveo contact info	2016-04-08 17:55:15 +03:00
Andrei Hrabouski	847a8401e7	Update README.md	2016-04-08 17:35:08 +03:00
KostyaDanovsky	cd2d2b24cd	fix(mobile): remove background-attachment for mobile bg block	2016-04-08 12:06:41 +03:00
alex	885f33c5c7	fix(mobile): fix backgroud size	2016-04-07 16:45:42 +03:00
alex	333be7f516	refactor(sidebar): change menu items order	2016-04-05 11:43:46 +03:00
alex	0a072e664e	fix(mobile): detect mobile bu userAgent	2016-03-30 15:39:56 +03:00
alex	fdd0fc8623	fix mobile version	2016-03-16 15:16:07 +03:00
alex	ac604770f4	refactor(todo): remove akveo mail	2016-03-05 18:05:07 +03:00
alex	f8cae976cf	refactor(litleIssues): preloader logs and firefox, tabs - icons,message-center icons raonded	2016-03-05 17:46:49 +03:00
alex	e6100f4b28	fix(preloader): wait while amChart is loading	2016-03-05 17:31:07 +03:00
alex	61cb13de2f	fix(timeline): fix time line icons size	2016-03-05 12:08:33 +03:00