mirror of https://github.com/akveo/blur-admin
email and grid widgets and fix typography
alex
parent
9e51c66b36
commit
24f3b9d49a
|
|
@ -5,7 +5,9 @@ var blurAdminApp = angular.module('BlurAdmin', [
|
|||
'ngRoute',
|
||||
'ngTouch',
|
||||
'BlurAdmin.dashboard',
|
||||
'BlurAdmin.mail',
|
||||
'BlurAdmin.buttonsPage',
|
||||
'BlurAdmin.gridPage',
|
||||
'BlurAdmin.chartsPage',
|
||||
'BlurAdmin.formInputsPage',
|
||||
'BlurAdmin.formLayoutsPage',
|
||||
|
|
|
|||
|
|
@ -57,9 +57,18 @@ blurAdminApp.directive('sidebar', function () {
|
|||
{
|
||||
title: 'Modals',
|
||||
root: '#/modals'
|
||||
},
|
||||
{
|
||||
title: 'Grid',
|
||||
root: '#/grid'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Mail',
|
||||
icon: 'ion-ios-email-outline',
|
||||
root: '#/mail'
|
||||
},
|
||||
{
|
||||
title: 'Maps',
|
||||
icon: 'ion-ios-location-outline',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
.show-grid [class^=col-] {
|
||||
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background-color: $border-light;;
|
||||
padding: 12px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-h{
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
&:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<widgets ng-model="widgetBlocks"></widgets>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.gridPage', ['ngRoute'])
|
||||
|
||||
.config(['$routeProvider', function ($routeProvider) {
|
||||
$routeProvider.when('/grid', {
|
||||
templateUrl: 'app/pages/grid/grid.html',
|
||||
controller: 'gridPageCtrl'
|
||||
});
|
||||
}])
|
||||
.controller('gridPageCtrl', ['$scope', function ($scope) {
|
||||
$scope.widgetBlocks = [
|
||||
{
|
||||
widgets: [
|
||||
[
|
||||
{
|
||||
url: 'app/pages/grid/widgets/baseGrid.html'
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
];
|
||||
}]);
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
<h4 class="grid-h">Stacked to horizontal</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-8">
|
||||
<div>.col-md-8</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div>.col-md-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-4">
|
||||
<div>.col-md-4</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div>.col-md-4</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div>.col-md-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-6">
|
||||
<div>.col-md-6</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div>.col-md-6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Mobile and desktop</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-12 col-md-8">
|
||||
<div>xs-12 .col-md-8</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<div>xs-6 .col-md-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<div>xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<div>xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<div>xs-6 .col-md-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6">
|
||||
<div>.col-xs-6</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>.col-xs-6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Mobile, tablet, desktop</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-12 col-sm-6 col-md-8">
|
||||
<div>.col-xs-12 .col-sm-6 .col-md-8</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<div>.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<div>.col-xs-6 .col-sm-4</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<div>.col-xs-6 .col-sm-4</div>
|
||||
</div>
|
||||
<div class="clearfix visible-xs-block"></div>
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<div>.col-xs-6 .col-sm-4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Column wrapping</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-9">
|
||||
<div>.col-xs-9</div>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<div>.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous
|
||||
unit.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>.col-xs-6<br>Subsequent columns continue along the new line.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Responsive column resets</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<div>.col-xs-6 .col-sm-3 <p>Resize your viewport or check it out on your phone for an example.</p></div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<div>.col-xs-6 .col-sm-3</div>
|
||||
</div>
|
||||
<div class="clearfix visible-xs-block"></div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<div>.col-xs-6 .col-sm-3</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<div>.col-xs-6 .col-sm-3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Offsetting columns</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-4">
|
||||
<div>.col-md-4</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<div>.col-md-4 .col-md-offset-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-3 col-md-offset-3">
|
||||
<div>.col-md-3 .col-md-offset-3</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-md-offset-3">
|
||||
<div>.col-md-3 .col-md-offset-3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-6 col-md-offset-3">
|
||||
<div>.col-md-6 .col-md-offset-3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Grid options</h4>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th> Extra small devices
|
||||
<small>Phones (<768px)</small>
|
||||
</th>
|
||||
<th> Small devices
|
||||
<small>Tablets (≥768px)</small>
|
||||
</th>
|
||||
<th> Medium devices
|
||||
<small>Desktops (≥992px)</small>
|
||||
</th>
|
||||
<th> Large devices
|
||||
<small>Desktops (≥1200px)</small>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Grid behavior</th>
|
||||
<td>Horizontal at all times</td>
|
||||
<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Container width</th>
|
||||
<td>None (auto)</td>
|
||||
<td>750px</td>
|
||||
<td>970px</td>
|
||||
<td>1170px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Class prefix</th>
|
||||
<td><code>.col-xs-</code></td>
|
||||
<td><code>.col-sm-</code></td>
|
||||
<td><code>.col-md-</code></td>
|
||||
<td><code>.col-lg-</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row"># of columns</th>
|
||||
<td colspan="4">12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Column width</th>
|
||||
<td class="text-muted">Auto</td>
|
||||
<td>~62px</td>
|
||||
<td>~81px</td>
|
||||
<td>~97px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Gutter width</th>
|
||||
<td colspan="4">30px (15px on each side of a column)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Nestable</th>
|
||||
<td colspan="4">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Offsets</th>
|
||||
<td colspan="4">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Column ordering</th>
|
||||
<td colspan="4">Yes</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
.mail-container{
|
||||
div{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<div class="row">
|
||||
<div class="col-md-12 col-sm-12">
|
||||
<blur-panel class-container="large-panel">
|
||||
<blur-email></blur-email>
|
||||
</blur-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.mail', ['ngRoute'])
|
||||
|
||||
.config(['$routeProvider', function ($routeProvider) {
|
||||
$routeProvider.when('/mail', {
|
||||
templateUrl: 'app/pages/mail/mail.html',
|
||||
controller: 'MailCtrl'
|
||||
});
|
||||
$routeProvider.when('/mail/:label', {
|
||||
templateUrl: 'app/pages/mail/mail.html',
|
||||
controller: 'MailCtrl'
|
||||
});
|
||||
$routeProvider.when('/mail/:label/:id', {
|
||||
templateUrl: 'app/pages/mail/mail.html',
|
||||
controller: 'MailCtrl'
|
||||
});
|
||||
}])
|
||||
.controller('MailCtrl', ['$scope', function ($scope) {
|
||||
}]);
|
||||
|
|
@ -0,0 +1,365 @@
|
|||
.mail-navigation-container {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
.mail-navigation {
|
||||
cursor: pointer;
|
||||
display: table-cell;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
font-weight: 100;
|
||||
font-size: 18px;
|
||||
&.active {
|
||||
color: $dribble-color;
|
||||
}
|
||||
transition: transform .5s ease;
|
||||
&:hover{
|
||||
transform: skew(-10deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-container, .side-message-navigation{
|
||||
float: left;
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
height: 650px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
|
||||
.side-message-navigation{
|
||||
width: 249px;
|
||||
}
|
||||
|
||||
.message-container{
|
||||
width: calc(100% - 250px);
|
||||
}
|
||||
|
||||
.additional-info{
|
||||
display: none;
|
||||
&.date{
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
|
||||
.additional-info{
|
||||
&.date{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.side-message-navigation{
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.message-container{
|
||||
width: calc(100% - 180px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
|
||||
.side-message-navigation{
|
||||
width: 380px;
|
||||
}
|
||||
|
||||
.message-container{
|
||||
width: calc(100% - 380px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.control-container {
|
||||
background-color: #ebebeb;
|
||||
padding-left: 15px;
|
||||
margin-bottom: 30px;
|
||||
.compose-button {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 100;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
background-color: $dribble-color;
|
||||
}
|
||||
|
||||
.icon-buttons {
|
||||
margin-left: -10px;
|
||||
}
|
||||
.btn-icon {
|
||||
background-color: $dribble-color;
|
||||
color: white;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
font-size: 16px;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.btn.btn-icon.dropdown-toggle {
|
||||
width: 50px;
|
||||
&.margin-left {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.more-button {
|
||||
font-size: 12px;
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.little-human {
|
||||
cursor: pointer;
|
||||
transition: border-left 1.5s ease;
|
||||
.little-human-picture {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 23px;
|
||||
margin: 0 10px 10px 0;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
.name {
|
||||
font-size: 14px;
|
||||
vertical-align: super;
|
||||
}
|
||||
.date {
|
||||
text-align: right;
|
||||
span {
|
||||
vertical-align: super;
|
||||
padding-rigth: 5px;
|
||||
}
|
||||
}
|
||||
.tag {
|
||||
vertical-align: super;
|
||||
margin: 0 3px;
|
||||
}
|
||||
.subject {
|
||||
vertical-align: super;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.little-human-picture {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.name {
|
||||
color: $dribble-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tag {
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
font-weight: 100;
|
||||
cursor: pointer;
|
||||
&.label {
|
||||
padding: .3em .6em;
|
||||
}
|
||||
&.work {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
&.study {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
&.family {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
&.friend {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
.messages {
|
||||
overflow: auto;
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.important {
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
.message-control-icon {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.person-info {
|
||||
padding:0 15px;
|
||||
.human-picture {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 45px;
|
||||
margin-top: -43px;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
margin-top: 5px;
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
display: inline-block;
|
||||
div {
|
||||
margin-top: 10px;
|
||||
}
|
||||
&.phone-email {
|
||||
.ion-iphone {
|
||||
font-size: 32px;
|
||||
width: 27px;
|
||||
display: inline-block;
|
||||
}
|
||||
.phone {
|
||||
font-size: 19px;
|
||||
font-weight: 200;
|
||||
vertical-align: super;
|
||||
}
|
||||
.ion-email {
|
||||
font-size: 24px;
|
||||
width: 27px;
|
||||
display: inline-block;
|
||||
}
|
||||
.email {
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
vertical-align: super;
|
||||
}
|
||||
}
|
||||
|
||||
&.position-address {
|
||||
div {
|
||||
margin-top: 17px;
|
||||
}
|
||||
.position {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.address {
|
||||
font-size: 16px;
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-details {
|
||||
margin: 5px 0;
|
||||
.subject {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.control-icons {
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
margin-right: 40px;
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-body {
|
||||
margin: 20px 0;
|
||||
width: 85%;
|
||||
font-weight: 100;
|
||||
line-height: 18px;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment {
|
||||
|
||||
margin: 5px 0;
|
||||
|
||||
.file-icon {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 16px;
|
||||
vertical-align: super;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.file-link {
|
||||
font-size: 25px;
|
||||
border-bottom: solid 3px;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-line {
|
||||
margin: 15px;
|
||||
.tag{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
background-color: $input-border;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.answer-button {
|
||||
margin-left: 20px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 100;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
background-color: $dribble-color;
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
&:focus {
|
||||
color: white;
|
||||
}
|
||||
&.focus {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.answer-container {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.answer-area {
|
||||
width: 60%;
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
<div class="mail-container">
|
||||
<div class="row">
|
||||
<div class="mail-navigation-container">
|
||||
<div ng-repeat="t in tabs" class="mail-navigation {{tab == $index ? 'active' : ''}}" ng-click="selectTab($index)">
|
||||
{{t.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-container row clearfix">
|
||||
<div class="col-lg-4 col-sm-4 col-xs-4">
|
||||
<button type="button" class="btn compose-button">
|
||||
Compose
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-lg-8 col-sm-8 col-xs-8 icon-buttons">
|
||||
<button type="button" class="btn btn-icon"><i class="ion-android-download"></i></button>
|
||||
<button type="button" class="btn btn-icon" ng-click="mail.important = !mail.important">
|
||||
<i title="Important" class="ion-ios-star{{mail.important ? '' : '-outline'}}"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-icon" ng-click="mail.trash = !mail.trash">
|
||||
<i title="Trash" class="ion-ios-trash{{mail.trash ? '' : '-outline'}}"></i>
|
||||
</button>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-icon dropdown-toggle margin-left" data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<i title="Folder" class="ion-android-folder-open"> </i><span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href>Action</a></li>
|
||||
<li><a href>Another action</a></li>
|
||||
<li><a href>Something else here</a></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href>Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-icon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<i title="Folder" class="ion-link"> </i><span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href>Action</a></li>
|
||||
<li><a href>Another action</a></li>
|
||||
<li><a href>Something else here</a></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href>Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-icon dropdown-toggle more-button" data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false">More<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href>Action</a></li>
|
||||
<li><a href>Another action</a></li>
|
||||
<li><a href>Something else here</a></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href>Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row inbox-layout">
|
||||
<div class="side-message-navigation">
|
||||
<div class="messages">
|
||||
<table>
|
||||
<tr ng-repeat="m in currentMessages | orderBy:'-date'" class="little-human {{m == mail ? 'active' : ''}}"
|
||||
ng-click="selectMail(m)">
|
||||
<td><img ng-src="{{m.pic}}" class="little-human-picture"></td>
|
||||
<td><span class="name">{{m.name.split(' ')[0] + ' ' + m.name.split(' ')[1][0]}}.</span></td>
|
||||
<td class="additional-info"><span class="tag label label-primary {{m.tag}}">{{m.tag}}</span></td>
|
||||
<td class="additional-info"><span class="subject">{{m.subject}}</span></td>
|
||||
<td class="date additional-info"><span>{{m.date | date : 'MMM d HH:mm'}}</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-container with-scroll">
|
||||
<div class="message" ng-show="mail">
|
||||
<div class="person-info row">
|
||||
<div class="col-lg-4 col-sm-4 col-xs-12 no-padding">
|
||||
<img ng-src="{{mail.pic}}" class="human-picture">
|
||||
|
||||
<div class="name">
|
||||
<h2>{{mail.name.split(' ')[0]}}</h2>
|
||||
|
||||
<h2>{{mail.name.split(' ')[1]}}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-4 col-xs-12 no-padding">
|
||||
<div class="contact-info phone-email">
|
||||
<div>
|
||||
<i class="ion-iphone"></i>
|
||||
<span class="phone">777-777-7777</span>
|
||||
</div>
|
||||
<div>
|
||||
<i class="ion-email"></i>
|
||||
<span class="email">{{mail.email}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 col-sm-4 col-xs-12 no-padding">
|
||||
<div class="contact-info position-address">
|
||||
<div>
|
||||
<span class="position">{{mail.position}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="address">12 Nezavisimosti st. Vilnius, Lithuania</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-sm-4 col-xs-12 no-padding">
|
||||
|
||||
</div>
|
||||
<div class="col-lg-8 col-sm-8 col-xs-12 no-padding">
|
||||
<div class="tag-line">
|
||||
<span class="tag label work">Work</span>
|
||||
<span class="tag label family">Family</span>
|
||||
<span class="tag label friend">Friend</span>
|
||||
<span class="tag label study">Study</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="message-details">
|
||||
<span class="subject">{{mail.subject}} </span>
|
||||
<span class="date">• {{mail.date | date : 'h:mm a MMMM d '}}</span>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div ng-bind-html="mail.body" class="message-body">
|
||||
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="attachment" ng-show="mail.attachment">
|
||||
<i class="file-icon ion-document"></i>
|
||||
<span class="file-name">{{mail.attachment}}</span>
|
||||
<i class="file-link ion-arrow-down-a"></i>
|
||||
</div>
|
||||
<div class="line" ng-show="mail.attachment"></div>
|
||||
<div class="answer-container" ng-show="tab != 1">
|
||||
<textarea ng-show="tab != 3" placeholder="Type.." class="form-control answer-area"></textarea>
|
||||
<button type="button" class="btn answer-button">Send</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div ng-show="!mail">
|
||||
<h5 ng-class="text-center">Nothing to show</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,295 @@
|
|||
'use strict';
|
||||
|
||||
blurAdminApp.directive('blurEmail', function () {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
controller: ['$scope', '$routeParams', '$location', '$sce', function ($scope, $routeParams, $location, $sce) {
|
||||
console.log($routeParams);
|
||||
$scope.messages = [
|
||||
{
|
||||
"id": "4563faass",
|
||||
"name": "Anastasiya Tyshkavets",
|
||||
"subject": "Great text",
|
||||
"date": "2015-08-28T07:57:09",
|
||||
"important": true,
|
||||
"body": $sce.trustAsHtml("<p>Hey John,</p><p>Check out this cool text.</p>"),
|
||||
"pic": "img/Nasta.png",
|
||||
"email": "petraramsey@mail.com",
|
||||
"attachment": "poem.txt",
|
||||
"draft": false,
|
||||
"trash": false,
|
||||
"position": "Great Employee",
|
||||
"tag": "friend"
|
||||
},
|
||||
{
|
||||
"id": "4563fdfvd",
|
||||
"name": "Anastasiya Tyshkavets",
|
||||
"subject": "Lores ipsum",
|
||||
"date": "2015-11-19T03:30:45",
|
||||
"important": false,
|
||||
"body": $sce.trustAsHtml("<p>Hey John,</p><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ex mauris, ultrices vel lectus quis, scelerisque hendrerit ipsum. Suspendisse ullamcorper turpis neque, eget dapibus magna placerat ac. Suspendisse rhoncus ligula ac mi tempus varius ut sed lacus. Sed et commodo nulla, et placerat leo. Nam rhoncus vulputate sem non pharetra. Praesent fringilla massa in laoreet convallis. Aliquam lobortis dui a congue facilisis. Aenean dapibus semper semper. Quisque aliquam, nibh dapibus interdum condimentum, ex velit tempor tortor, at vestibulum magna leo quis leo. Morbi pulvinar varius erat ac rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst.</p>" +
|
||||
"<br><p>Cras rhoncus quam ipsum, vel dignissim nisl egestas sed. Aliquam erat volutpat. Integer eu nisl elit. Donec malesuada diam vitae tellus luctus tincidunt. Donec tempus blandit neque, rutrum egestas ipsum sagittis tempor. Curabitur volutpat ligula enim, nec vehicula purus molestie at. Sed a facilisis enim, nec molestie magna. Donec in augue non est viverra dapibus vel tempus risus. Nam porttitor purus sit amet hendrerit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>"),
|
||||
"pic": "img/Nasta.png",
|
||||
"email": "petraramsey@mail.com",
|
||||
"position": "Great Employee",
|
||||
"tag": "work",
|
||||
"draft": false,
|
||||
"trash": false
|
||||
},
|
||||
{
|
||||
"id": "4563zxcss",
|
||||
"name": "Anastasiya Tyshkavets",
|
||||
"subject": "Lores ipsum",
|
||||
"date": "2015-10-19T03:30:45",
|
||||
"important": false,
|
||||
"body": $sce.trustAsHtml("<p>Hey John,</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>"),
|
||||
"pic": "img/Nasta.png",
|
||||
"email": "petraramsey@mail.com",
|
||||
"position": "Great Employee",
|
||||
"tag": "work",
|
||||
"draft": false,
|
||||
"trash": true
|
||||
},
|
||||
{
|
||||
"id": "8955sddf",
|
||||
"name": "Nikolass Cat",
|
||||
"subject": "New Design",
|
||||
"date": "2015-05-05T12:59:45",
|
||||
"important": true,
|
||||
"body": $sce.trustAsHtml("<p>Hey John, Consectetur adipiscing elit</p><br>" +
|
||||
"<p>Cras rhoncus quam ipsum, vel dignissim nisl egestas sed. Aliquam erat volutpat. Integer eu nisl elit. Donec malesuada diam vitae tellus luctus tincidunt. Donec tempus blandit neque, rutrum egestas ipsum sagittis tempor. Curabitur volutpat ligula enim, nec vehicula purus molestie at. Sed a facilisis enim, nec molestie magna. Donec in augue non est viverra dapibus vel tempus risus. Nam porttitor purus sit amet hendrerit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>"),
|
||||
"pic": "img/Nick.png",
|
||||
"email": "barlowshort@mail.com",
|
||||
"position": "Graphical designer",
|
||||
"attachment": "design.psd",
|
||||
"draft": false,
|
||||
"trash": false,
|
||||
"tag": "work"
|
||||
},
|
||||
{
|
||||
"id": "8955sdfcc",
|
||||
"name": "Nikolass Cat",
|
||||
"subject": "Gift card",
|
||||
"date": "2015-07-18T10:19:01",
|
||||
"important": false,
|
||||
"body": $sce.trustAsHtml("<p>Hey John,</p><br><p>Consectetur adipiscing elit, Lorem ipsum dolor sit amet</p>"),
|
||||
"pic": "img/Nick.png",
|
||||
"email": "barlowshort@mail.com",
|
||||
"position": "Graphical designer",
|
||||
"draft": false,
|
||||
"trash": false,
|
||||
"tag": "work"
|
||||
},
|
||||
{
|
||||
"id": "8955asewf",
|
||||
"name": "Nikolass Cat",
|
||||
"subject": "Some news",
|
||||
"date": "2015-09-23T03:04:10",
|
||||
"important": true,
|
||||
"body": $sce.trustAsHtml("<p>Hey John,</p><br><p>Integer eu nisl elit. Donec malesuada diam vitae tellus luctus tincidunt. Donec tempus blandit neque, rutrum egestas ipsum sagittis tempor. Curabitur volutpat ligula enim, nec vehicula purus molestie at. Sed a facilisis enim, nec molestie magna. Donec in augue non est viverra dapibus vel tempus risus. Nam porttitor purus sit amet hendrerit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>"),
|
||||
"pic": "img/Nick.png",
|
||||
"email": "barlowshort@mail.com",
|
||||
"position": "Graphical designer",
|
||||
"draft": false,
|
||||
"trash": false,
|
||||
"tag": "work"
|
||||
},
|
||||
{
|
||||
"id": "2334uudsa",
|
||||
"name": "Konstantin Danovsky",
|
||||
"subject": "Street Art",
|
||||
"date": "2015-11-22T10:05:09",
|
||||
"important": false,
|
||||
"body": $sce.trustAsHtml("<p>Hey John,</p><p>Aliquam eu facilisis eros, quis varius est.</p>" +
|
||||
"<p>Consectetur adipiscing elit. Aliquam sodales sem in nibh pellentesque, ac dignissim mi dapibus.</p>" +
|
||||
"<p>Lorem ipsum dolor sit amet! Nullam imperdiet justo a ipsum laoreet euismod.</p>" +
|
||||
"<br><p>Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed." +
|
||||
"Sed quis orci sed nisl sagittis viverra id at mauris. Nam venenatis mi nibh. Sed fringilla mattis vehic</p>"),
|
||||
"pic": "img/Kostya.png",
|
||||
"email": "schwartzalford@mail.com",
|
||||
"position": "Technical Chef",
|
||||
"draft": false,
|
||||
"attachment": "file.doc",
|
||||
"trash": false,
|
||||
"tag" : "work"
|
||||
},
|
||||
{
|
||||
"id": "2334aefvv",
|
||||
"name": "Konstantin Danovsky",
|
||||
"subject": "New product",
|
||||
"date": "2015-06-22T06:26:10",
|
||||
"important": true,
|
||||
"body": $sce.trustAsHtml("<p>Hello John,</p><p>Lorem ipsum dolor sit amet!</p>" +
|
||||
"<p>Consectetur adipiscing elit. Aliquam sodales sem in nibh pellentesque, ac dignissim mi dapibus.</p>" +
|
||||
"<p>Aliquam eu facilisis eros, quis varius est. Nullam imperdiet justo a ipsum laoreet euismod.</p>" +
|
||||
"<br><p>Nulla facilisi. Nulla congue, arcu eget blandit lacinia, leo ante ullamcorper lectus, vel pulvinar justo ipsum vitae justo." +
|
||||
"Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed. Sed quis orci sed nisl sagittis viverra id at mauris. Nam venenatis mi nibh. Sed fringilla mattis vehic</p>"),
|
||||
"pic": "img/Kostya.png",
|
||||
"email": "schwartzalford@mail.com",
|
||||
"position": "Technical Chef",
|
||||
"draft": false,
|
||||
"trash": false,
|
||||
"tag" : "work"
|
||||
},
|
||||
{
|
||||
"id": "8223xzxfn",
|
||||
"name": "Andrei Hrabouski",
|
||||
"subject": "Skype moji",
|
||||
"date": "2015-07-16T06:47:53",
|
||||
"important": false,
|
||||
"body": $sce.trustAsHtml("<p>Hello John,</p><p>Aliquam sodales sem in nibh pellentesque</p>" +
|
||||
"<p>Lorem ipsum dolor I find moji in skype sit amet!.</p>"),
|
||||
"pic": "img/Andrey.png",
|
||||
"email": "lakeishaphillips@mail.com",
|
||||
"position": "Mobile Developer",
|
||||
"tag" : 'family',
|
||||
"draft": false,
|
||||
"trash": true
|
||||
},
|
||||
{
|
||||
"id": "8223sdffn",
|
||||
"name": "Andrei Hrabouski",
|
||||
"subject": "My App",
|
||||
"date": "2015-06-20T07:05:02",
|
||||
"important": false,
|
||||
"body": $sce.trustAsHtml("<p>Hey Vlad.</p><p>Lorem ipsum dolor sit amet!</p>" +
|
||||
"<p>Consectetur My Falasson App elit. Aliquam sodales sem in nibh pellentesque, ac dignissim mi dapibus.</p>"),
|
||||
"pic": "img/Andrey.png",
|
||||
"email": "lakeishaphillips@mail.com",
|
||||
"position": "Mobile Developer",
|
||||
"draft": false,
|
||||
"trash": false,
|
||||
"tag" : 'family',
|
||||
"spam": true
|
||||
},
|
||||
{
|
||||
"id": "9391xdsff",
|
||||
"name": "Vladimir Lugovsky",
|
||||
"subject": "Cool",
|
||||
"date": "2015-03-31T11:52:58",
|
||||
"important": false,
|
||||
"body": $sce.trustAsHtml("<p>Hey Vlad.</p><p>Aliquam sodales sem in nibh pellentesque</p>" +
|
||||
"<p>Cras tincidunt fermentum lectus, quis scelerisque lorem volutpat sed.</p>"),
|
||||
"pic": "img/Vlad.png",
|
||||
"email": "carlsongoodman@mail.com",
|
||||
"my": true,
|
||||
"position": "Fullstack man",
|
||||
"tag": "study",
|
||||
"draft": false,
|
||||
"trash": false,
|
||||
"spam": false
|
||||
},
|
||||
{
|
||||
"id": "9391xdsff",
|
||||
"name": "Vladimir Lugovsky",
|
||||
"subject": "Whan next",
|
||||
"date": "2015-03-31T11:52:58",
|
||||
"important": false,
|
||||
"body": $sce.trustAsHtml("<p>Hey Vlad.</p><p>Lorem ipsum dolor sit amet!</p>" +
|
||||
"<p>Esse esse labore tempor ullamco ullamco. Id veniam laborum c.</p>"),
|
||||
"pic": "img/Vlad.png",
|
||||
"email": "carlsongoodman@mail.com",
|
||||
"my": true,
|
||||
"position": "Fullstack man",
|
||||
"tag": "study",
|
||||
"draft": true,
|
||||
"trash": false,
|
||||
"spam": false
|
||||
}
|
||||
].sort(function (a, b) {
|
||||
if (a.date > b.date) return 1;
|
||||
if (a.date < b.date) return -1;
|
||||
}).reverse();
|
||||
|
||||
$scope.tabs = [
|
||||
{
|
||||
label: 'inbox',
|
||||
name: 'Inbox',
|
||||
filter: function (messages) {
|
||||
return messages.filter(function (m) {
|
||||
return !m.trash && !m.draft && !m.spam && !m.my
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'sentMail',
|
||||
name: 'Sent Mail',
|
||||
filter: function (messages) {
|
||||
return messages.filter(function (m) {
|
||||
return m.my && !m.trash && !m.draft
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'important',
|
||||
name: 'Important',
|
||||
filter: function (messages) {
|
||||
return messages.filter(function (m) {
|
||||
return m.important && !m.trash && !m.draft
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'draft',
|
||||
name: 'Draft',
|
||||
filter: function (messages) {
|
||||
return messages.filter(function (m) {
|
||||
return m.draft && !m.trash
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'spam',
|
||||
name: 'Spam',
|
||||
filter: function (messages) {
|
||||
return messages.filter(function (m) {
|
||||
return m.spam && !m.trash
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'trash',
|
||||
name: 'Trash',
|
||||
filter: function (messages) {
|
||||
return messages.filter(function (m) {
|
||||
return m.trash
|
||||
});
|
||||
}
|
||||
}];
|
||||
|
||||
$scope.selectTab = function (tab) {
|
||||
$scope.tab = tab;
|
||||
$scope.currentMessages = $scope.tabs[tab].filter($scope.messages);
|
||||
$scope.mail = $scope.currentMessages[0];
|
||||
//var mailId = $scope.mail ? $scope.mail.id : '';
|
||||
//$location.path("/mail/"+$scope.tabs[tab].label+"/"+ mailId);
|
||||
};
|
||||
|
||||
$scope.selectMail = function (mail) {
|
||||
$scope.mail = mail;
|
||||
//$location.path("/mail/"+$scope.tabs[$scope.tab].label+"/"+ mail.id);
|
||||
};
|
||||
|
||||
$scope.isSelectedTab = function (tab) {
|
||||
return $scope.tab === tab;
|
||||
};
|
||||
|
||||
function findTabByLabel(label) {
|
||||
var i = 0;
|
||||
while (label && i < $scope.tabs.length && $scope.tabs[i].label.toLowerCase() !== label.toLowerCase())i++;
|
||||
return i === $scope.tabs.length ? 0 : i;
|
||||
}
|
||||
|
||||
function findMessageById(id) {
|
||||
var i = 0;
|
||||
while (id && i < $scope.currentMessages.length && $scope.currentMessages[i].id !== id)i++;
|
||||
return i === $scope.currentMessages.length ? 0 : i;
|
||||
}
|
||||
|
||||
$scope.tab = findTabByLabel($routeParams.label);
|
||||
$scope.currentMessages = $scope.tabs[$scope.tab].filter($scope.messages);
|
||||
$scope.mail = $scope.currentMessages[findMessageById($routeParams.id)];
|
||||
}],
|
||||
templateUrl: 'app/pages/mail/widgets/email-widget/email.html'
|
||||
};
|
||||
});
|
||||
|
|
@ -53,225 +53,116 @@ h5 {
|
|||
.typography-document-samples {
|
||||
|
||||
|
||||
.typography-document{
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.typography-widget {
|
||||
height: 100%;
|
||||
|
||||
div.panel{
|
||||
.panel {
|
||||
height: 620px;
|
||||
}
|
||||
height: 100%;
|
||||
.panel-body {
|
||||
padding: 15px 30px 0 30px;
|
||||
}
|
||||
|
||||
.typography-widget-header {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.typography-widget-header {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.heading-widget {
|
||||
text-align: center;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
width: 100%;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 16px;
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.more-text-widget {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
|
||||
p {
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.gray {
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
.black {
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.light-text {
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.regular-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.upper-text {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.bold-text {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
padding: 5px 0 0 0;
|
||||
p {
|
||||
font-size: 9px;
|
||||
font-weight: 100;
|
||||
line-height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.heading-widget {
|
||||
text-align: center;
|
||||
.color-widget {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
p {
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
width: 100%;
|
||||
font-weight: 100;
|
||||
}
|
||||
.section-block {
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 16px;
|
||||
font-weight: 100;
|
||||
}
|
||||
.red-text p {
|
||||
color: $dribble-color;
|
||||
}
|
||||
|
||||
.blue-text p {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.links {
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.more-text-widget {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
|
||||
p {
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.gray {
|
||||
color: #767676;
|
||||
}
|
||||
|
||||
.black {
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.light-text {
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.regular-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.upper-text {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.bold-text {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.small-text {
|
||||
padding: 5px 0 24px 0;
|
||||
p {
|
||||
font-size: 9px;
|
||||
font-weight: 100;
|
||||
line-height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.color-widget {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
p {
|
||||
line-height: 17px;
|
||||
}
|
||||
|
||||
.section-block{
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
.red-text p{
|
||||
color: $dribble-color;
|
||||
}
|
||||
|
||||
.blue-text p{
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.links {
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
&.hovered {
|
||||
a {
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.lists-widget{
|
||||
|
||||
|
||||
font-weight: 100;
|
||||
.list-header{
|
||||
width: 100%;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.accent {
|
||||
margin-top: 44px;
|
||||
color: $dribble-color;
|
||||
line-height: 14px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 36px;
|
||||
padding-left: 11px;
|
||||
border-left: 4px solid $dribble-color;
|
||||
margin-left: 13px;
|
||||
}
|
||||
|
||||
ul.blur, ol.blur {
|
||||
padding-left: 13px;
|
||||
margin-bottom: 19px;
|
||||
list-style: none;
|
||||
padding-top: 1px;
|
||||
li {
|
||||
margin-top: 5px;
|
||||
color: $default-text;
|
||||
font-size: 14px;
|
||||
ul, ol {
|
||||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.blur {
|
||||
li {
|
||||
&:before {
|
||||
content: "• ";
|
||||
color: $dribble-color;
|
||||
width: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol.blur {
|
||||
counter-reset: section;
|
||||
li {
|
||||
color: $dribble-color;
|
||||
padding-left: 0;
|
||||
line-height: 14px;
|
||||
position: relative;
|
||||
span {
|
||||
color: $default-text;
|
||||
display: block;
|
||||
}
|
||||
ol {
|
||||
padding-left: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
&:before {
|
||||
content: counters(section, ".") ".";
|
||||
counter-increment: section;
|
||||
width: 19px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
& > li {
|
||||
span {
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
ol {
|
||||
counter-reset: section;
|
||||
& > li {
|
||||
&:before {
|
||||
width: 30px;
|
||||
}
|
||||
span {
|
||||
padding-left: 27px
|
||||
}
|
||||
}
|
||||
ol {
|
||||
& > li {
|
||||
&:before {
|
||||
width: 40px;
|
||||
}
|
||||
span {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
&.hovered {
|
||||
a {
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -279,7 +170,110 @@ h5 {
|
|||
|
||||
}
|
||||
|
||||
.columns-section{
|
||||
.lists-widget {
|
||||
|
||||
font-weight: 100;
|
||||
.list-header {
|
||||
width: 100%;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.accent {
|
||||
margin-top: 30px;
|
||||
color: $dribble-color;
|
||||
line-height: 14px;
|
||||
font-size: 14px;
|
||||
padding-left: 11px;
|
||||
border-left: 4px solid $dribble-color;
|
||||
margin-left: 13px;
|
||||
}
|
||||
|
||||
ul.blur, ol.blur {
|
||||
padding-left: 13px;
|
||||
margin-bottom: 19px;
|
||||
list-style: none;
|
||||
padding-top: 1px;
|
||||
li {
|
||||
margin-top: 5px;
|
||||
color: $default-text;
|
||||
font-size: 14px;
|
||||
ul, ol {
|
||||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.blur {
|
||||
li {
|
||||
&:before {
|
||||
content: "• ";
|
||||
color: $dribble-color;
|
||||
width: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ol.blur {
|
||||
counter-reset: section;
|
||||
li {
|
||||
color: $dribble-color;
|
||||
padding-left: 0;
|
||||
line-height: 14px;
|
||||
position: relative;
|
||||
span {
|
||||
color: $default-text;
|
||||
display: block;
|
||||
}
|
||||
ol {
|
||||
padding-left: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
&:before {
|
||||
content: counters(section, ".") ".";
|
||||
counter-increment: section;
|
||||
width: 19px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
& > li {
|
||||
span {
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
ol {
|
||||
counter-reset: section;
|
||||
& > li {
|
||||
&:before {
|
||||
width: 30px;
|
||||
}
|
||||
span {
|
||||
padding-left: 27px
|
||||
}
|
||||
}
|
||||
ol {
|
||||
& > li {
|
||||
&:before {
|
||||
width: 40px;
|
||||
}
|
||||
span {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns-section {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
|
@ -297,8 +291,6 @@ p.small-text {
|
|||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.cols-two {
|
||||
margin-bottom: 50px;
|
||||
& > div {
|
||||
|
|
@ -344,8 +336,6 @@ a.learn-more {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.banner {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -395,11 +385,11 @@ a.learn-more {
|
|||
.banner-text {
|
||||
padding: 55px 60px 30px;
|
||||
min-width: 0;
|
||||
h1{
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
p{
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -426,8 +416,6 @@ a.learn-more {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.section-block {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
|
@ -444,8 +432,20 @@ a.learn-more {
|
|||
padding: 0 20px 50px 20px;
|
||||
}
|
||||
|
||||
div.banner-column-panel{
|
||||
.panel.banner-column-panel {
|
||||
padding: 0;
|
||||
margin-bottom: 50px;
|
||||
|
||||
.panel-body{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 1700px) {
|
||||
.col-xlg-3{
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,274 +1,246 @@
|
|||
<div class="widgets">
|
||||
<div class="typography-document-samples row-fluid">
|
||||
<div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
|
||||
<div class="widgets-block typography-widget">
|
||||
<div class="panel panel-default invisible with-scroll" zoom-in>
|
||||
<div class="panel-body content-panel heading-widget">
|
||||
<div class="section-block">
|
||||
<h2 class="typography-widget-header">Text Size</h2>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h1>H1. Heading 1</h1>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl </p>
|
||||
|
||||
<p>pulvinar, lacinia scelerisque pharetra, placerat
|
||||
vestibulum eleifend pellentesque, mi nam.</p>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h2>H2. Heading 2</h2>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||
vestibulum eleifend pellentesque, mi nam.</p>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h3>H3. Heading 3</h3>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||
vestibulum eleifend pellentesque, mi nam.</p>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h4>H4. Heading 4</h4>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||
vestibulum eleifend pellentesque, mi nam.</p>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h5>H5. Heading 5</h5>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="typography-document-samples row-fluid">
|
||||
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||
<blur-panel class-container="with-scroll heading-widget">
|
||||
<div class="section-block">
|
||||
<h2 class="typography-widget-header">Text Size</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
|
||||
<div class="widgets-block typography-widget">
|
||||
<div class="panel panel-default invisible with-scroll" zoom-in>
|
||||
<div class="panel-body content-panel more-text-widget">
|
||||
<div class="section-block">
|
||||
<h2 class="typography-widget-header">Some more text</h2>
|
||||
</div>
|
||||
<div class="section-block light-text">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
|
||||
ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
|
||||
ornare
|
||||
nulla. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis
|
||||
parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h1>H1. Heading 1</h1>
|
||||
|
||||
<div class="section-block regular-text">
|
||||
<p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget urna
|
||||
mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
|
||||
ridiculus
|
||||
mus. Nullam id dolor id nibh ultricies vehicula ut id elit. In sed ornare nulla
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-block upper-text bold-text">
|
||||
<p class="black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
|
||||
quis
|
||||
ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
|
||||
ornare
|
||||
nulla. </p>
|
||||
</div>
|
||||
<div class="section-block bold-text">
|
||||
<p class="black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
|
||||
quis
|
||||
ullam-corper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
|
||||
ornare
|
||||
nulla.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-block small-text">
|
||||
<p>Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,</p>
|
||||
|
||||
<p>lacinia scelerisque pharetra, placerat vestibulum eleifend</p>
|
||||
|
||||
<p> pellentesque, mi nam.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||
vestibulum eleifend pellentesque.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
|
||||
<div class="widgets-block typography-widget">
|
||||
<div class="panel panel-default invisible with-scroll" zoom-in>
|
||||
<div class="panel-body content-panel lists-widget">
|
||||
<div class="section-block">
|
||||
<h2 class="typography-widget-header">Lists</h2>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h5 class="list-header">Unordered list:</h5>
|
||||
<ul class="blur">
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Сlacinia scelerisque pharetra
|
||||
<ul>
|
||||
<li>Dui rhoncus quisque integer lorem
|
||||
<ul>
|
||||
<li>Libero iaculis vestibulum eu vitae</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Nisl lectus nibh habitasse suspendisse ut</li>
|
||||
<li><span>Posuere cursus hac, vestibulum wisi nulla bibendum</span></li>
|
||||
</ul>
|
||||
<h5 class="list-header">Ordered Lists:</h5>
|
||||
<ol class="blur">
|
||||
<li><span>Eu non nec cursus quis mollis, amet quam nec</span></li>
|
||||
<li><span>Et suspendisse, adipiscing fringilla ornare sit ligula sed</span>
|
||||
<ol>
|
||||
<li><span>Interdum et justo nulla</span>
|
||||
<ol>
|
||||
<li><span>Magna amet, suscipit suscipit non amet</span></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li><span>Metus duis eu non eu ridiculus turpis</span></li>
|
||||
<li>
|
||||
<span>Neque egestas id fringilla consectetuer justo curabitur, wisi magna neque commodo volutpat</span>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="accent">Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl
|
||||
pulvinar,
|
||||
lacinia scelerisque pharetra.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h2>H2. Heading 2</h2>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||
vestibulum eleifend pellentesque.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3 col-sm-6 col-xs-12 typography-document">
|
||||
<div class="widgets-block typography-widget">
|
||||
<div class="panel panel-default invisible with-scroll" zoom-in>
|
||||
<div class="panel-body content-panel color-widget">
|
||||
<div class="section-block">
|
||||
<h2 class="typography-widget-header">Text Color</h2>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h3>H3. Heading 3</h3>
|
||||
|
||||
<div class="section-block red-text ">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
|
||||
ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
|
||||
ornare
|
||||
nulla. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis
|
||||
dis
|
||||
parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="section-block blue-text ">
|
||||
<p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget
|
||||
urna
|
||||
mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
|
||||
ridiculus
|
||||
mus. Nullam id dolor id nibh ultricies vehicula ut id elit. In sed ornare nulla
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="section-block links">
|
||||
<p>Lorem ipsum <a href>dolor</a> sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
|
||||
quis
|
||||
<a href>ullamcorper</a> ligula sodales at. Nulla tellus elit, varius non commodo eget, <a
|
||||
href>mattis</a> vel eros. In sed ornare
|
||||
nulla.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="section-block links">
|
||||
<p><a href>Active link — #41bee9</a></p>
|
||||
|
||||
<p class="hovered"><a href>Hover link — #9d498c</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||
vestibulum eleifend pellentesque.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h4>H4. Heading 4</h4>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra, placerat
|
||||
vestibulum eleifend pellentesque.</p>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h5>H5. Heading 5</h5>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar, lacinia scelerisque pharetra.</p>
|
||||
</div>
|
||||
</blur-panel>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="col-lg-12 col-sm-12 col-xs-12">
|
||||
<div class="widgets-block">
|
||||
<div class="panel panel-default invisible with-scroll" zoom-in>
|
||||
<div class="panel-body content-panel banner-column-panel">
|
||||
<div class="banner">
|
||||
<div class="large-banner-wrapper">
|
||||
<img src="img/banner.png" alt=""/>
|
||||
</div>
|
||||
<div class="banner-text-wrapper">
|
||||
<div class="banner-text">
|
||||
<h1>Simple Banner Text</h1>
|
||||
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||
<blur-panel class-container="with-scroll more-text-widget">
|
||||
<div class="section-block">
|
||||
<h2 class="typography-widget-header">Some more text</h2>
|
||||
</div>
|
||||
<div class="section-block light-text">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
|
||||
ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
|
||||
ornare
|
||||
nulla. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-block regular-text">
|
||||
<p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget urna
|
||||
mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
|
||||
ridiculus
|
||||
mus. Nullam id dolor id.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-block upper-text bold-text">
|
||||
<p class="black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
|
||||
quis
|
||||
ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
|
||||
ornare
|
||||
nulla. </p>
|
||||
</div>
|
||||
<div class="section-block bold-text">
|
||||
<p class="black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
|
||||
quis
|
||||
ullam-corper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
|
||||
ornare
|
||||
nulla.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-block small-text">
|
||||
<p>Secondary text. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl pulvinar,</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
<p>lacinia scelerisque pharetra, placerat vestibulum eleifend</p>
|
||||
|
||||
<p>Odio amet viverra rutrum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Columns</h2>
|
||||
<p> pellentesque, mi nam.</p>
|
||||
</div>
|
||||
</blur-panel>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="img-wrapper"><img src="img/typo03.png" alt="" title=""/></div>
|
||||
<p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a
|
||||
href>dapibus</a> magna rutrum. Ornare neque suspendisse <a
|
||||
href>phasellus wisi</a>, quam cras pede rutrum suspendisse, <a
|
||||
href>felis amet eu</a>. Congue magna elit quisque quia, nullam justo sagittis,
|
||||
ante erat libero placerat, proin condimentum consectetuer lacus. Velit condimentum velit, sed
|
||||
penatibus
|
||||
arcu nulla.</p>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="img-wrapper"><img src="img/typo01.png" alt="" title=""/></div>
|
||||
<p>Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla,
|
||||
fermentum
|
||||
lobortis purus ut eu, duis nibh dolor massa tristique elementum, nibh iste potenti risus fusce
|
||||
aliquet
|
||||
fusce, ullamcorper debitis primis arcu tellus vestibulum ac.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||
<blur-panel class-container="with-scroll lists-widget">
|
||||
<div class="section-block">
|
||||
<h2 class="typography-widget-header">Lists</h2>
|
||||
</div>
|
||||
<div class="section-block">
|
||||
<h5 class="list-header">Unordered list:</h5>
|
||||
<ul class="blur">
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Сlacinia scelerisque pharetra
|
||||
<ul>
|
||||
<li>Dui rhoncus quisque integer lorem
|
||||
<ul>
|
||||
<li>Libero iaculis vestibulum eu vitae</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Nisl lectus nibh habitasse suspendisse ut</li>
|
||||
<li><span>Posuere cursus hac, vestibulum wisi nulla bibendum</span></li>
|
||||
</ul>
|
||||
<h5 class="list-header">Ordered Lists:</h5>
|
||||
<ol class="blur">
|
||||
<li><span>Eu non nec cursus quis mollis, amet quam nec</span></li>
|
||||
<li><span>Et suspendisse, adipiscing fringilla ornare sit ligula sed</span>
|
||||
<ol>
|
||||
<li><span>Interdum et justo nulla</span>
|
||||
<ol>
|
||||
<li><span>Magna amet, suscipit suscipit non amet</span></li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li><span>Metus duis eu non eu ridiculus turpis</span></li>
|
||||
<li>
|
||||
<span>Neque egestas id fringilla consectetuer justo curabitur, wisi magna neque commodo volutpat</span>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="accent">Important text fragment. Lorem ipsum dolor sit amet, id mollis iaculis mi nisl
|
||||
pulvinar,
|
||||
lacinia scelerisque pharetra.
|
||||
</div>
|
||||
</div>
|
||||
</blur-panel>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
<div class="col-xlg-3 col-lg-6 col-md-6 col-sm-6 col-xs-12 typography-widget">
|
||||
<blur-panel class-container="with-scroll color-widget">
|
||||
<div class="section-block">
|
||||
<h2 class="typography-widget-header">Text Color</h2>
|
||||
</div>
|
||||
<div class="section-block red-text ">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis
|
||||
ullamcorper ligula sodales at. Nulla tellus elit, varius non commodo eget, mattis vel eros. In sed
|
||||
ornare
|
||||
nulla. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis
|
||||
dis
|
||||
parturient montes, nascetur ridiculus mus.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-block blue-text ">
|
||||
<p>Curabitur bibendum ornare dolor, quis ullamcorper ligula dfgz`zzsodales at. Nullam quis risus eget
|
||||
urna
|
||||
mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
|
||||
ridiculus
|
||||
mus. Nullam id dolor id nibh ultricies vehicula ut id elit. In sed ornare nulla.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-block links">
|
||||
<p>Lorem ipsum <a href>dolor</a> sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor,
|
||||
quis
|
||||
<a href>ullamcorper</a> ligula sodales at. Nulla tellus elit, varius non commodo eget, <a
|
||||
href>mattis</a> vel eros. In sed ornare
|
||||
nulla.
|
||||
</p>
|
||||
</div>
|
||||
<div class="section-block links">
|
||||
<p><a href>Active link — #41bee9</a></p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h4>Column heading example</h4>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h4>Yet another column heading example</h4>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h4>Third column heading example</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="img-wrapper"><img src="img/typo04.png" alt=""/></div>
|
||||
<p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
|
||||
maecenas</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="img-wrapper"><img src="img/typo05.png" alt=""/></div>
|
||||
<p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat
|
||||
in
|
||||
velit</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="img-wrapper"><img src="img/typo06.png" alt=""/></div>
|
||||
<p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
</div>
|
||||
<p class="hovered"><a href>Hover link — #9d498c</a></p>
|
||||
</div>
|
||||
</blur-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="col-lg-12 col-sm-12 col-xs-12">
|
||||
<blur-panel class-container="banner-column-panel">
|
||||
<div class="banner">
|
||||
<div class="large-banner-wrapper">
|
||||
<img src="img/banner.png" alt=""/>
|
||||
</div>
|
||||
<div class="banner-text-wrapper">
|
||||
<div class="banner-text">
|
||||
<h1>Simple Banner Text</h1>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
|
||||
<p>Odio amet viverra rutrum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Columns</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="img-wrapper"><img src="img/typo03.png" alt="" title=""/></div>
|
||||
<p>Vel elit, eros elementum, id lacinia, duis non ut ut tortor blandit. Mauris <a
|
||||
href>dapibus</a> magna rutrum. Ornare neque suspendisse <a
|
||||
href>phasellus wisi</a>, quam cras pede rutrum suspendisse, <a
|
||||
href>felis amet eu</a>. Congue magna elit quisque quia, nullam justo sagittis,
|
||||
ante erat libero placerat, proin condimentum consectetuer lacus. Velit condimentum velit, sed
|
||||
penatibus
|
||||
arcu nulla.</p>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="img-wrapper"><img src="img/typo01.png" alt="" title=""/></div>
|
||||
<p>Et suspendisse, adipiscing fringilla ornare sit ligula sed, vel nam. Interdum et justo nulla,
|
||||
fermentum
|
||||
lobortis purus ut eu, duis nibh dolor massa tristique elementum, nibh iste potenti risus fusce
|
||||
aliquet
|
||||
fusce, ullamcorper debitis primis arcu tellus vestibulum ac.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<h4>Column heading example</h4>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h4>Yet another column heading example</h4>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<h4>Third column heading example</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="img-wrapper"><img src="img/typo04.png" alt=""/></div>
|
||||
<p>Eget augue, lacus erat ante egestas scelerisque aliquam, metus molestie leo in habitasse magna
|
||||
maecenas</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="img-wrapper"><img src="img/typo05.png" alt=""/></div>
|
||||
<p>Augue massa et parturient, suspendisse orci nec scelerisque sit, integer nam mauris pede consequat
|
||||
in
|
||||
velit</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="img-wrapper"><img src="img/typo06.png" alt=""/></div>
|
||||
<p>Eget turpis, tortor lobortis porttitor, vestibulum nullam vehicula aliquam</p>
|
||||
<a href class="learn-more">Lean more</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
</div>
|
||||
</blur-panel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,6 +32,9 @@
|
|||
"../../app/pages/dashboard/widgets/popularApp/popularApp.scss",
|
||||
"../../app/pages/dashboard/widgets/blurFeed/blurFeed.scss",
|
||||
"../../app/pages/dashboard/widgets/weather/weather.scss",
|
||||
"../../app/pages/grid/grid.scss",
|
||||
"../../app/pages/mail/mail.scss",
|
||||
"../../app/pages/mail/widgets/email-widget/email.scss",
|
||||
"../../app/pages/maps/widgets/leaflet/leaflet.scss",
|
||||
"../../app/pages/maps/widgets/google-maps/google-maps.scss",
|
||||
"../../app/pages/maps/widgets/map-bubbles/map-bubbles.scss",
|
||||
|
|
|
|||
Loading…
Reference in New Issue