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

refactor(panels): apply new page design

pull/3/head
alex 2016-02-17 13:46:18 +03:00
parent 7c5ead7f81
commit e61d51a071
4 changed files with 174 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
src/app/pages/ui/panels/panels.html
View File

@ -1,83 +1,184 @@
<div>
<div class="row">
<h2>Default panels</h2>
</div>
<div class="row">
<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 class="col-md-12 col-lg-4">
<h3>Simple panel</h3>
<div ba-panel ba-panel-class="xsmall-panel">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac mi erat. Phasellus placerat, elit a laoreet
semper, enim ipsum ultricies orci, ac tincidunt tellus massa eu est. Nam non porta purus, sed facilisis justo. Nam
pulvinar sagittis quam, eget posuere turpis facilisis pharetra. Integer facilisis ex sed aliquet euismod. Interdum
et malesuada fames ac ante ipsum primis in faucibus.
</div>
</div>
<div class="col-md-12 col-lg-4">
<h3>Panel with Header</h3>
<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 ba-panel ba-panel-title="Example header" ba-panel-class="xsmall-panel">
Phasellus maximus venenatis augue, et vestibulum neque aliquam ut. Morbi mattis libero vitae vulputate dignissim.
Praesent placerat, sem non dapibus cursus, lacus nisi blandit quam, vitae porttitor lectus lacus non turpis. Donec
suscipit consequat tellus, non blandit purus porttitor a. Sed scelerisque ac purus id sollicitudin. Vestibulum
magna ligula, tristique eu aliquam id, mollis vel nunc.
</div>
</div>
<div class="col-md-12 col-lg-4">
<h3>Panel with scroll</h3>
<div ba-panel ba-panel-title="Example header" ba-panel-class="xsmall-panel with-scroll">
<p>
Suspendisse nec tellus urna. Sed id est metus. Nullam sit amet dolor nec ipsum dictum suscipit. Mauris sed nisi
mauris. Nulla iaculis nisl ut velit ornare imperdiet. Suspendisse potenti. In tempor leo sed sem malesuada
pellentesque. Maecenas faucibus metus lacus, ac egestas diam vulputate vitae.
</p>
<p>
Sed dapibus, purus vel hendrerit consectetur, lectus orci gravida massa, sed bibendum dui mauris et eros. Nulla
dolor massa, posuere et dictum sit amet, dignissim quis odio. Fusce mollis finibus dignissim. Integer sodales
augue erat. Pellentesque laoreet vestibulum urna at iaculis. Nulla libero augue, euismod at diam eget, aliquam
condimentum ligula. Donec a leo eu est molestie lacinia hendrerit sed lorem. Duis id diam eu metus sodales
consequat vel eu elit. Praesent dolor nibh, convallis eleifend feugiat a, finibus porttitor nibh. Ut non libero
vel velit pulvinar scelerisque non vel lorem. Integer porta tempor nulla. Sed nibh erat, ultrices vel lorem eu,
rutrum vehicula sem.
</p>
<p>
Donec nec tellus urna. Sed id est metus. Nullam sit amet dolor nec ipsum dictum suscipit. Mauris sed nisi
mauris. Nulla iaculis nisl ut velit ornare imperdiet. Suspendisse potenti. In tempor leo sed sem malesuada
pellentesque. Maecenas faucibus metus lacus, ac egestas diam vulputate vitae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum nec ligula egestas rhoncus. Sed
dignissim, augue vel scelerisque vulputate, nisi ante posuere lorem, quis iaculis eros dolor eu nisl. Etiam
sagittis, ipsum ac tempor iaculis, justo neque mattis ante, ac maximus sapien risus eu sapien. Morbi erat urna,
varius et lectus vel, porta dictum orci. Duis bibendum euismod elit, et lobortis purus venenatis in. Mauris eget
lacus enim. Cras quis sem et magna fringilla convallis. Proin hendrerit nulla vel gravida mollis. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Vestibulum consectetur quis purus vel aliquam.
</p>
<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>
</div>
<hr>
<h2>Panel Group</h2>
<div class="row">
<h2>Bootstrap panels</h2>
</div>
<div class="row">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Panel group 1</div>
<div class="col-md-12 col-lg-4">
<div class="panel panel-default bootstrap-panel">
<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>
<p>A panel in bootstrap is a bordered box with some padding around its content.</p>
<p class="p-with-code">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 .panel-primary .panel-danger</code> and other classes
are used to style the color of the
panel. See the next example on this page for more contextual classes.</p>
</div>
</div>
</div>
<hr>
<div class="col-md-12 col-lg-4">
<div class="panel panel-default bootstrap-panel">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<p class="p-with-code">The <code>.panel-heading</code> class adds a heading to the panel.Easily add a heading
container to your
panel with .panel-heading. You may also include any
<code>h1-h6</code> with a <code>.panel-title</code> class to add a pre-styled heading.
</p>
</div>
</div>
</div>
<div class="col-md-12 col-lg-4">
<div class="panel panel-default bootstrap-panel">
<div class="panel-body">
<p class="p-with-code">
Wrap buttons or secondary text in <code>.panel-footer</code>. Note that panel footers do not inherit colors
and
borders when
using contextual variations as they are not meant to be in the foreground.
</p>
</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
<div class="row">
<h2>Panels with Contextual Classes</h2>
<div class="panel-group">
<div class="panel panel-default">
</div>
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="panel panel-default contextual-example-panel bootstrap-panel">
<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 class="panel-body">To color the panel, use contextual classes. This is sample <code>.panel-default</code>
panel
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="col-md-6 col-lg-4">
<div class="panel panel-primary contextual-example-panel bootstrap-panel">
<div class="panel-heading">Panel with panel-primary class</div>
<div class="panel-body">Sample <code>.panel-primary</code> panel</div>
</div>
</div>
<div class="panel panel-success">
<div class="col-md-6 col-lg-4">
<div class="panel panel-success contextual-example-panel bootstrap-panel">
<div class="panel-heading">Panel with panel-success class</div>
<div class="panel-body">Sample <code>.panel-success</code> panel</div>
</div>
</div>
<div class="panel panel-info">
<div class="col-md-6 col-lg-4">
<div class="panel panel-info contextual-example-panel bootstrap-panel">
<div class="panel-heading">Panel with panel-info class</div>
<div class="panel-body">Sample <code>.panel-info</code> panel</div>
</div>
</div>
<div class="panel panel-warning">
<div class="col-md-6 col-lg-4">
<div class="panel panel-warning contextual-example-panel bootstrap-panel">
<div class="panel-heading">Panel with panel-warning class</div>
<div class="panel-body">Sample <code>.panel-warning</code> panel</div>
</div>
</div>
<div class="panel panel-danger">
<div class="col-md-6 col-lg-4">
<div class="panel panel-danger contextual-example-panel bootstrap-panel">
<div class="panel-heading">Panel with panel-danger class</div>
<div class="panel-body">Sample <code>.panel-danger</code> panel</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Panel Group</h2>
<div class="panel-group">
<div class="panel panel-default bootstrap-panel">
<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 bootstrap-panel">
<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>
</div>
</div>

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

@ -9,7 +9,7 @@ $panel-heading-font-size: 16px;
position: relative;
//transition: all 0.2s ease;
margin-bottom: 24px;
box-shadow:0 5px 5px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
/*&:hover {
background: $panel-bg-hover;
}*/
@ -19,6 +19,9 @@ $panel-heading-font-size: 16px;
&.small-panel {
height: $small-panel-height;
}
&.xsmall-panel {
height: $xsmall-panel-height;
}
&.medium-panel {
height: $medium-panel-height;
}
@ -70,11 +73,11 @@ $panel-heading-font-size: 16px;
}
}
.panel-white{
.panel-white {
background-color: $panel-bg;
}
.panel-blur{
.panel-blur {
$blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
background: url($blurredBgUrl);
}
@ -119,6 +122,32 @@ $panel-heading-font-size: 16px;
}
}
.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger {
.panel-heading {
color: rgba(255, 255, 255, 0.8);
border-radius: 0;
}
}
.panel.bootstrap-panel .panel-body p {
color: $default-text;
}
.panel-group .panel {
border-radius: 0;
.panel-heading {
border-bottom: 1px solid #ddd;
}
}
.p-with-code {
line-height: 1.5em;
}
.contextual-example-panel {
height: 120px;
}
/*
.panel-group .panel {
border-radius: 0;

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

@ -109,7 +109,7 @@
}
@mixin overridePanelBg($color, $borderColor, $dropdownColor) {
.panel, .panel:hover {
.panel.panel-blur, .panel.panel-blur:hover {
border-color: $borderColor;
background-color: $color;
}

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

@ -71,6 +71,7 @@ $resMin: 320px;
$top-height: 66px;
$small-panel-height: 114px;
$xsmall-panel-height: 250px;
$medium-panel-height: 400px;
$extra-medium-panel-height: 550px;
$large-panel-height: 974px;