jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

feat(panel): sample panels page

pull/3/head
Vladimir Lugovsky 2016-01-05 17:37:42 +03:00
parent b211a4798b
commit 78747fb2b4
10 changed files with 169 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
src/app/pages/panels/panels.html
View File

@ -1,7 +1,83 @@
<div class="panel panel-danger">
<div class="panel-body">
<div class="panel-content">
A Basic Panel
<div>
<div class="panel panel-default">
<div class="panel-body">
<p>A panel in bootstrap is a bordered box with some padding around its content.</p>
<p>Panels are created with the <code>.panel</code> class, and content inside the panel has a
<code>.panel-body</code> class. The <code>.panel-default</code> class is used to style the color of the
panel. See the last example on this page for more contextual classes.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p>The <code>.panel-heading</code> class adds a heading to the panel.</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<p>The <code>.panel-footer</code> class adds a footer to the panel.</p>
</div>
<div class="panel-footer">Panel Footer</div>
</div>
<hr>
<h2>Panel Group</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel group 1</div>
<div class="panel-body">
<p>To group many panels together, wrap a <code>&lt;div&gt;</code> with class <code>
.panel-group</code> around them.</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Panel group 2</div>
<div class="panel-body">
<p>The <code>.panel-group</code> class clears the bottom-margin of each panel.</p>
</div>
</div>
</div>
<hr>
<h2>Panels with Contextual Classes</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">To color the panel, use contextual classes. This is sample <code>.panel-default</code> panel</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Sample <code>.panel-primary</code> panel</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Panel with panel-success class</div>
<div class="panel-body">Sample <code>.panel-success</code> panel</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Panel with panel-info class</div>
<div class="panel-body">Sample <code>.panel-info</code> panel</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">Panel with panel-warning class</div>
<div class="panel-body">Sample <code>.panel-warning</code> panel</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Sample <code>.panel-danger</code> panel</div>
</div>
</div>
</div>

2
src/app/theme/components/baPanel/baPanel.directive.js
View File

@ -15,7 +15,7 @@
function baPanel(baPanel) {
return angular.extend({}, baPanel, {
template: function(el, attrs) {
var res = '<div class="panel panel-default invisible ' + (attrs.baPanelClass || '') + '" zoom-in>';
var res = '<div class="panel panel-white invisible ' + (attrs.baPanelClass || '') + '" zoom-in>';
res += baPanel.template(el, attrs);
res += '</div>';
return res;

2
src/app/theme/components/baPanel/baPanelSelf.directive.js
View File

@ -15,7 +15,7 @@
function baPanelSelf(baPanel) {
return angular.extend({}, baPanel, {
link: function(scope, el, attrs) {
el.addClass('panel panel-default');
el.addClass('panel panel-white');
if (attrs.baPanelClass) {
el.addClass(attrs.baPanelClass);
}

8
src/sass/app/_typography.scss
View File

@ -1,6 +1,5 @@
h1, h2, h3, h4, h5, h6 {
font-family: $font-family;
color: $default-text;
width: 90%;
margin-top: 0;
}
@ -19,17 +18,17 @@ a {
h1 {
font-size: 32px;
font-weight: 100;
font-weight: 400;
}
h2 {
font-size: 24px;
font-weight: 200;
font-weight: 400;
}
h3 {
font-size: 20px;
font-weight: 300;
font-weight: 400;
}
h4 {
@ -274,7 +273,6 @@ h5 {
p {
margin-bottom: 12px;
color: $default-text;
font-family: $font-family;
font-size: 14px;
}

2
src/sass/common.scss
View File

@ -1,2 +1,2 @@
@import 'theme/conf/mixins';
@import 'theme/conf/variables';
@import 'theme/conf/mixins';

2
src/sass/theme/_layout.scss
View File

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

61
src/sass/theme/bootstrap-overrides/_panel.scss
View File

@ -5,6 +5,7 @@ $panel-heading-font-size: 16px;
border: none;
border-radius: 0;
background-color: $panel-bg;
color: $default-text;
position: relative;
transition: all 0.2s ease;
margin-bottom: 24px;
@ -44,19 +45,21 @@ $panel-heading-font-size: 16px;
height: 100%;
}
.panel-heading {
.panel-heading, .panel-footer {
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-title {
font-weight: 600;
text-transform: uppercase;
}
.panel-white {
> .panel-heading {
background-color: transparent;
border: none;
@ -64,7 +67,47 @@ $panel-heading-font-size: 16px;
}
}
.panel-title {
font-weight: 600;
text-transform: uppercase;
}
.panel-primary {
> .panel-heading {
color: $primary;
background-color: $primary-bg;
border-color: $primary-bg;
}
}
.panel-success {
> .panel-heading {
color: $success;
background-color: $success-bg;
border-color: $success-bg;
}
}
.panel-info {
> .panel-heading {
color: $info;
background-color: $info-bg;
border-color: $info-bg;
}
}
.panel-warning {
> .panel-heading {
color: $warning;
background-color: $warning-bg;
border-color: $warning-bg;
}
}
.panel-danger {
> .panel-heading {
color: $danger;
background-color: $danger-bg;
border-color: $danger-bg;
}
}
/*
.panel-group .panel {
border-radius: 0;
}*/

3
src/sass/theme/components/_accordion.scss
View File

@ -1,3 +1,4 @@
/*
.panel-group {
> .panel {
> .panel-heading {
@ -24,4 +25,4 @@
.panel-body {
padding: 15px;
}
}
}*/

18
src/sass/theme/conf/_mixins.scss
View File

@ -1,3 +1,21 @@
/// 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;

16
src/sass/theme/conf/_variables.scss
View File

@ -7,17 +7,19 @@ $warning: #bbcb50!default;
$danger: #9d498c!default;
$default: #e9e9e9!default;
$primary-dark: #1694bf;
$success-dark: #1c4a42;
$warning-dark: #8b992d;
$danger-dark: #632e58;
$primary-dark: shade($primary, 66%);
$success-dark: shade($success, 66%);
$warning-dark: shade($warning, 66%);
$danger-dark: shade($danger, 66%);
$primary-light: #5FBCBB;
$success-light: #85BA54;
$primary-bg: #C5ECF9;
$success-bg: #C1DBD7;
$danger-bg: #E1C8DD;
$primary-bg: tint($primary, 70%);
$info-bg: tint($info, 70%);
$success-bg: tint($success, 70%);
$warning-bg: tint($warning, 70%);
$danger-bg: tint($danger, 70%);
$facebook-color: #3b5998;
$twitter-color: #55acee;