refactor(panel): refactor global panel styles

pull/3/head
Vladimir Lugovsky 2016-01-05 13:42:08 +03:00
parent 0616501eaf
commit b211a4798b
9 changed files with 93 additions and 34 deletions

View File

@ -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() {
}
})();

View File

@ -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() {
}
})();

View File

@ -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() {
}
})();

View File

@ -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() {
}
})();

View File

@ -16,7 +16,7 @@
restrict: 'A', restrict: 'A',
transclude: true, transclude: true,
template: function(elem, attrs) { 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) { if (attrs.baPanelTitle) {
var titleTpl = '<div class="panel-heading clearfix"><h3 class="panel-title">' + attrs.baPanelTitle + '</h3></div>'; var titleTpl = '<div class="panel-heading clearfix"><h3 class="panel-title">' + attrs.baPanelTitle + '</h3></div>';
res = titleTpl + res; // title should be before res = titleTpl + res; // title should be before

View File

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

View File

@ -13,7 +13,7 @@ html, body {
} }
body { body {
font: 12px/16px $font-family; font: 14px/16px $font-family;
color: $default-text; color: $default-text;
@include main-background(); @include main-background();
} }

View File

@ -1,12 +1,14 @@
$panel-title-height: 35px; $panel-title-height: 44px;
$panel-heading-font-size: 16px;
.panel { .panel {
border: none; border: none;
border-radius: 0px; border-radius: 0;
background-color: $panel-bg; background-color: $panel-bg;
position: relative; position: relative;
transition: all 0.2s ease; transition: all 0.2s ease;
margin-bottom: 24px; margin-bottom: 24px;
&:hover { &:hover {
background: $panel-bg-hover; background: $panel-bg-hover;
} }
@ -32,30 +34,37 @@ $panel-title-height: 35px;
&.with-scroll { &.with-scroll {
.panel-body { .panel-body {
height: calc(100% - #{$panel-title-height}); 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-title {
height: $panel-title-height;
line-height: 20px;
padding-top: 15px;
}
.panel-body { .panel-body {
padding: 0;
}
.panel-content {
padding: 15px 22px; padding: 15px 22px;
height: 100%; height: 100%;
} }
.panel-heading {
height: $panel-title-height;
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-default {
> .panel-heading {
background-color: transparent;
border: none;
color: $default-text;
}
}
.panel-title {
font-weight: 600;
text-transform: uppercase;
}

View File

@ -1,5 +1,5 @@
.popular-app { .popular-app {
.panel-content { .panel-body {
padding: 0; padding: 0;
} }