refactor(panel): refactor global panel styles

brobertsaz · Jan 5, 2016 · b211a47 · b211a47
1 parent 0616501
commit b211a47
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 31 deletions.
diff --git a/src/app/pages/dashboard/calendar/dashboardCalendar.js b/src/app/pages/dashboard/calendar/dashboardCalendar.js
@@ -0,0 +1,15 @@
+/**
+ * @author v.lugovksy
+ * created on 16.12.2015
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.dashboard')
+      .service('dashboardCalendar', dashboardCalendar);
+
+  /** @ngInject */
+  function dashboardCalendar() {
+
+  }
+})();
diff --git a/src/app/pages/dashboard/pieCharts/dashboardPieChart.js b/src/app/pages/dashboard/pieCharts/dashboardPieChart.js
@@ -0,0 +1,15 @@
+/**
+ * @author v.lugovksy
+ * created on 16.12.2015
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.dashboard')
+      .service('dashboardPieChart', dashboardPieChart);
+
+  /** @ngInject */
+  function dashboardPieChart() {
+
+  }
+})();
diff --git a/src/app/pages/dashboard/popularApp/popularApp1.js b/src/app/pages/dashboard/popularApp/popularApp1.js
@@ -0,0 +1,15 @@
+/**
+ * @author v.lugovksy
+ * created on 16.12.2015
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.dashboard')
+      .service('popularApp1', popularApp1);
+
+  /** @ngInject */
+  function popularApp1() {
+
+  }
+})();
diff --git a/src/app/pages/dashboard/todo/dashboardTodo.js b/src/app/pages/dashboard/todo/dashboardTodo.js
@@ -0,0 +1,15 @@
+/**
+ * @author v.lugovksy
+ * created on 16.12.2015
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.dashboard')
+      .service('dashboardTodo', dashboardTodo);
+
+  /** @ngInject */
+  function dashboardTodo() {
+
+  }
+})();
diff --git a/src/app/theme/components/baPanel/baPanel.service.js b/src/app/theme/components/baPanel/baPanel.service.js
@@ -16,7 +16,7 @@
       restrict: 'A',
       transclude: true,
       template: function(elem, attrs) {
-        var res = '<div class="panel-body"><div class="panel-content" ng-transclude></div></div>';
+        var res = '<div class="panel-body" ng-transclude></div>';
         if (attrs.baPanelTitle) {
           var titleTpl = '<div class="panel-heading clearfix"><h3 class="panel-title">' + attrs.baPanelTitle + '</h3></div>';
           res = titleTpl + res; // title should be before

diff --git a/src/sass/app/_typography.scss b/src/sass/app/_typography.scss
@@ -19,35 +19,25 @@ a {
 
 h1 {
   font-size: 32px;
-  line-height: 40px;
-  margin-bottom: 14px;
   font-weight: 100;
 }
 
 h2 {
   font-size: 24px;
-  line-height: 40px;
-  margin-bottom: 10px;
   font-weight: 200;
 }
 
 h3 {
   font-size: 20px;
-  line-height: 40px;
-  margin-bottom: 6px;
   font-weight: 300;
 }
 
 h4 {
   font-size: 18px;
-  line-height: 38px;
-  margin-bottom: 5px;
 }
 
 h5 {
   font-size: 15px;
-  line-height: 35px;
-  margin-bottom: 3px;
 }
 
 .typography-document-samples {

diff --git a/src/sass/theme/_layout.scss b/src/sass/theme/_layout.scss
@@ -13,7 +13,7 @@ html, body {
 }
 
 body {
-  font: 12px/16px $font-family;
+  font: 14px/16px $font-family;
   color: $default-text;
   @include main-background();
 }

diff --git a/src/sass/theme/components/_blurPanel.scss → ...ass/theme/bootstrap-overrides/_panel.scss b/src/sass/theme/components/_blurPanel.scss → ...ass/theme/bootstrap-overrides/_panel.scss
@@ -1,12 +1,14 @@
-$panel-title-height: 35px;
+$panel-title-height: 44px;
+$panel-heading-font-size: 16px;
 
 .panel {
   border: none;
-  border-radius: 0px;
+  border-radius: 0;
   background-color: $panel-bg;
   position: relative;
   transition: all 0.2s ease;
   margin-bottom: 24px;
+
   &:hover {
     background: $panel-bg-hover;
   }
@@ -32,30 +34,37 @@ $panel-title-height: 35px;
   &.with-scroll {
     .panel-body {
       height: calc(100% - #{$panel-title-height});
-      .panel-content {
-        overflow-y: auto;
-      }
+      overflow-y: auto;
     }
   }
 }
 
-.panel-heading, .panel-default > .panel-heading {
-  background-color: transparent;
-  border: none;
-  padding: 0 22px;
-  color: $default-text;
+.panel-body {
+  padding: 15px 22px;
+  height: 100%;
 }
 
-.panel-title {
+.panel-heading {
   height: $panel-title-height;
-  line-height: 20px;
-  padding-top: 15px;
+  font-size: $panel-heading-font-size;
+
+  $vertical-padding: ($panel-title-height - $panel-heading-font-size) / 2;
+  padding: $vertical-padding 22px;
+
+  + .panel-body {
+    padding-top: 0;
+  }
 }
 
-.panel-body {
-  padding: 0;
+.panel-default {
+  > .panel-heading {
+    background-color: transparent;
+    border: none;
+    color: $default-text;
+  }
 }
-.panel-content {
-  padding: 15px 22px;
-  height: 100%;
+
+.panel-title {
+  font-weight: 600;
+  text-transform: uppercase;
 }
diff --git a/src/sass/theme/dashboard/_popularApp.scss b/src/sass/theme/dashboard/_popularApp.scss
@@ -1,5 +1,5 @@
 .popular-app {
-  .panel-content {
+  .panel-body {
     padding: 0;
   }