refactor(theme): move back to the original blur

pull/46/head
KostyaDanovsky 2016-04-22 20:47:33 +03:00 committed by kostya.danovsky
parent cd8666a452
commit 8a96c48407
26 changed files with 323 additions and 143 deletions

View File

@ -1,4 +1,4 @@
<div class="row mail-row">
<div class="row mail-client-container transparent">
<div class="col-md-12">
<div ba-panel ba-panel-class="xmedium-panel mail-panel">
<div class="letter-layout">

View File

@ -69,24 +69,24 @@
id: 'g0',
bullet: 'none',
useLineColorForBulletBorder: true,
lineColor: layoutColors.primary,
lineColor: 'rgba(0, 0, 0, 0.3)',
lineThickness: 1,
negativeLineColor: layoutColors.danger,
type: 'smoothedLine',
valueField: 'value0',
fillAlphas: 0.5,
fillAlphas: 1,
fillColorsField: 'lineColor'
},
{
id: 'g1',
bullet: 'none',
useLineColorForBulletBorder: true,
lineColor: layoutColors.primary,
lineColor: 'rgba(0, 0, 0, 0.4)',
lineThickness: 1,
negativeLineColor: layoutColors.danger,
type: 'smoothedLine',
valueField: 'value',
fillAlphas: 0.3,
fillAlphas: 1,
fillColorsField: 'lineColor'
}
],

View File

@ -9,24 +9,25 @@
.controller('DashboardPieChartCtrl', DashboardPieChartCtrl);
/** @ngInject */
function DashboardPieChartCtrl($scope, $element, $window, $timeout, layoutColors) {
function DashboardPieChartCtrl($scope, $timeout, layoutColors) {
var pieColor = 'rgba(255, 255, 255, 0.4)';
$scope.charts = [{
color: layoutColors.border,
color: pieColor,
description: 'New Visits',
stats: '57,820',
icon: 'person',
}, {
color: layoutColors.border,
color: pieColor,
description: 'Purchases',
stats: '$ 89,745',
icon: 'money',
}, {
color: layoutColors.border,
color: pieColor,
description: 'Active Users',
stats: '178,391',
icon: 'face',
}, {
color: layoutColors.border,
color: pieColor,
description: 'Returned',
stats: '32,592',
icon: 'refresh',

View File

@ -1,16 +1,18 @@
<input type="text" value="" class="form-control task-todo" placeholder="Task to do.." ng-keyup="addToDoItem($event)" ng-model="newTodoText"/>
<i ng-click="addToDoItem('',true)" class="add-item-icon ion-plus-round"></i>
<div class="box-shadow-border"></div>
<ul class="todo-list" ui-sortable ng-model="todoList">
<li ng-repeat="item in todoList" ng-if="!item.deleted" ng-init="activeItem=false"
ng-class="{checked: isChecked, active: activeItem}"
ng-mouseenter="activeItem=true" ng-mouseleave="activeItem=false">
<div class="blur-container"><div class="blur-box"></div></div>
<i class="mark" style="background-color: {{::item.color}}"></i>
<label class="todo-checkbox custom-checkbox custom-input-success">
<input type="checkbox" ng-model="isChecked">
<span class="cut-with-dots">{{ item.text }}</span>
</label>
<i class="remove-todo ion-ios-close-empty" ng-click="item.deleted = true"></i>
</li>
</ul>
<div class="task-todo-container transparent">
<input type="text" value="" class="form-control task-todo" placeholder="Task to do.." ng-keyup="addToDoItem($event)" ng-model="newTodoText"/>
<i ng-click="addToDoItem('',true)" class="add-item-icon ion-plus-round"></i>
<div class="box-shadow-border"></div>
<ul class="todo-list" ui-sortable ng-model="todoList">
<li ng-repeat="item in todoList" ng-if="!item.deleted" ng-init="activeItem=false"
ng-class="{checked: isChecked, active: activeItem}"
ng-mouseenter="activeItem=true" ng-mouseleave="activeItem=false">
<div class="blur-container"><div class="blur-box"></div></div>
<i class="mark" style="background-color: {{::item.color}}"></i>
<label class="todo-checkbox custom-checkbox custom-input-success">
<input type="checkbox" ng-model="isChecked">
<span class="cut-with-dots">{{ item.text }}</span>
</label>
<i class="remove-todo ion-ios-close-empty" ng-click="item.deleted = true"></i>
</li>
</ul>
</div>

View File

@ -13,14 +13,7 @@
var palette = layoutColors.bgColorPalette;
$scope.doughnutData = [
{
value: 1000,
color: palette.gossip,
highlight: palette.gossipDark,
label: 'Ad Campaigns',
percentage: 17,
order: 0,
},{
value: 1400,
value: 2000,
color: palette.white,
highlight: palette.whiteDark,
label: 'Other',
@ -47,9 +40,49 @@
label: 'Direct Traffic',
percentage: 38,
order: 2,
}, {
value: 400,
color: palette.gossip,
highlight: palette.gossipDark,
label: 'Ad Campaigns',
percentage: 17,
order: 0,
},
];
/*
* {
value: 2000,
color: layoutColors.defaultCharts,
highlight: "#f1f1f1",
label: 'Ad Campaigns'
},
{
value: 1500,
color: layoutColors.primaryCharts,
highlight: "#136775",
label: 'Search engines'
},
{
value: 1000,
color: layoutColors.infoCharts,
highlight: "#13998a",
label: 'Direct Traffic'
},
{
value: 1200,
color: layoutColors.successCharts,
highlight: "#94d7a1",
label: 'Referral Traffic'
},
{
value: 400,
color: layoutColors.warningCharts,
highlight: "#dcfcc4",
label: 'Other'
}
* */
var ctx = document.getElementById('chart-area').getContext('2d');
window.myDoughnut = new Chart(ctx).Doughnut($scope.doughnutData, {
segmentShowStroke: false,

View File

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

View File

@ -8,8 +8,8 @@
var IMAGES_ROOT = 'assets/img/';
var basic = {
default: '#ffffff',
defaultText: '#666666',
default: 'rgba(#000000, 0.2)',
defaultText: '#ffffff',
border: '#dddddd',
borderDark: '#aaaaaa',
};
@ -29,7 +29,7 @@
surfieGreen: '#0e8174',
silverTree: '#6eba8c',
gossip: '#b9f2a1',
white: '#10c4b5',
white: '#ffffff',
};
angular.module('BlurAdmin.theme')

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -1,5 +1,5 @@
.alert{
color: $default;
color: $default-text;
font-size: 13px;
font-weight: $font-light;
strong{

View File

@ -10,28 +10,21 @@
}
.mail-navigation-container {
float: left;
position: relative;
height: 550px;
transition: width 0.5s;
color: $default-text;
width: 200px;
overflow: hidden;
padding: 0;
.mail-navigation {
cursor: pointer;
font-weight: $font-light;
font-size: 16px;
text-align: left;
padding: 10px 10px 10px 30px;
margin-left: 0;
transition: 0.8s padding ease;
.new-mails {
position: absolute;
left: 150px;
padding: 1px 6px;
border: 1px solid;
background-color: transparent;
background-color: $primary-light;
margin-top: -2px;
font-size: 12px;
margin-right: 5px;
@ -39,29 +32,26 @@
transition: 0.8s left ease;
}
&.active {
background: rgba(black, 0.2);
color: white;
transition: background-color .5s ease;
background-color: $primary-light;
&:hover {
background-color: rgba(black, 0.3);
background-color: $primary-light;
}
.new-mails {
background-color: transparent;
color: $default;
color: $primary-light;
background-color: $default;
}
transition: background-color .2s ease, 0.8s padding ease;
}
&:hover {
background-color: rgba(black, 0.1);
background-color: $border-light;
}
}
.compose-button {
margin: 7px 0;
text-align: center;
.btn {
width: 140px;
font-weight: $font-light;
border: $border 2px solid;
background-color: transparent;
background-color: $dribble-color;
}
}
}
@ -134,17 +124,12 @@
}
}
.message-container, .side-message-navigation {
.message-container, .side-message-navigation, .mail-navigation-container {
float: left;
padding: 0 15px;
position: relative;
height: 550px;
transition: width 0.5s;
width: calc(100% - 200px);
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-left: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.12);
}
.side-message-navigation {
@ -769,7 +754,41 @@
}
}
body.badmin-transparent {
.mail-client-container.transparent {
.mail-navigation-container {
overflow: hidden;
width: 200px;
padding: 0;
.mail-navigation {
margin-left: 0;
.new-mails {
background-color: transparent;
}
&.active {
background: rgba(white, 0.2);
color: white;
transition: background-color .5s ease;
.new-mails {
background-color: transparent;
color: $default-text;
}
&:hover {
background-color: rgba(white, 0.3);
}
}
&:hover {
background-color: rgba(black, 0.1);
}
}
}
.message-container, .side-message-navigation{
width: calc(100% - 200px);
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-left: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.12);
}
.side-message-navigation {
overflow: hidden;
@ -799,13 +818,13 @@ body.badmin-transparent {
.compose-button {
text-align: center;
.btn {
border: $border 2px solid;
border: $default-text 2px solid;
background-color: transparent;
}
}
.side-message-navigation .side-message-navigation-item {
border-bottom: 1px solid $border;
border-bottom: 1px solid rgba($border, 0.2);
&.work, &.study, &.family, &.friend {
border-left: none;
}

View File

@ -61,10 +61,6 @@ textarea.form-control {
height: 96px;
}
.modal-form-btn {
text-align: center;
}
.form-inline {
.form-group {
input {
@ -86,17 +82,6 @@ textarea.form-control {
}
}
.modal-content {
border-radius: 5px;
border: none;
color: $default-text;
.modal-header {
color: $default;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
}
@mixin setSwitchBorder($color) {
.bootstrap-switch.bootstrap-switch-on {
border-color: $color;
@ -447,7 +432,7 @@ label.custom-input-danger {
color: $default-text;
border-color: $input-border;
&:focus, &:hover {
background: $default;
background: $default-text;
box-shadow: none;
outline: 0 !important;
}
@ -518,6 +503,10 @@ label.custom-input-danger {
}
}
.progress {
background: rgba(black, 0.15);
}
.progress-bar-primary {
background-color: $primary;
}

View File

@ -5,7 +5,7 @@
color: $default-text;
text-align: center;
font-size: 18px;
background-color: $border-light;
background-color: rgba(255, 255, 255, 0.3);
padding: 12px 5px;
}
}

View File

@ -1,3 +1,15 @@
.modal-content {
border-radius: 5px;
border: none;
color: $dropdown-text;
.modal-header {
color: $default-text;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
}
.modal-buttons {
margin-top: -12px;
margin-right: -22px;
@ -24,10 +36,10 @@
color: $github-color;
background-color: transparent;
border: 1px solid $input-border;
@include placeholderStyle($default-text, 0.9);
@include placeholderStyle($dropdown-text, 0.9);
}
.modal-body p, .modal-body div, .modal-body span{
color: $default-text;
color: $dropdown-text;
}
}
.modal-header {
@ -62,7 +74,7 @@
}
.modal-content .modal-header .modal-title{
color: $default-text;
color: $dropdown-text;
}
.message-modal {
@ -91,7 +103,7 @@
@mixin message-modal-color($color) {
.modal-header {
color: $default-text;
color: $dropdown-text;
background: $color;
}
}

View File

@ -70,7 +70,7 @@ button.btn.btn-default {
@include buttonColor(transparent, $border);
&:active, &:target {
background-color: rgba(0, 0, 0, 0.2);
color: $default;
color: $default-text;
}
}
@ -138,7 +138,7 @@ button.btn.btn-inverse {
@include buttonGroupColor($primary);
}
button.btn.btn-default {
@include buttonGroupColor($default);
@include buttonGroupColor($default-text);
}
button.btn.btn-danger {
@include buttonGroupColor($danger);
@ -255,3 +255,24 @@ button.progress-button {
padding: 8px 14px;
font-size: 16px;
}
.dropdown button.btn.btn-default.dropdown-toggle {
color: $default-text;
border: 1px solid $border;
background-color: transparent;
&:focus, &:active {
background-color: $default;
}
}
.bootstrap-select {
.dropdown-toggle:focus {
outline: none !important;
}
button.btn-default:focus {
color: $default;
}
.btn {
transition: none;
}
}

View File

@ -15,8 +15,8 @@ html, body {
body {
font: 14px/16px $font-family;
color: $default-text;
background-color: $body-bg;
//@include main-background();
//background-color: $body-bg;
@include main-background();
}
&.mobile{
@ -29,8 +29,8 @@ body {
bottom: 0;
right: 0;
background-attachment: inherit;
background-color: $body-bg;
//@include main-background();
//background-color: $body-bg;
@include main-background();
}
}

View File

@ -3,7 +3,7 @@
& > thead {
& > tr {
& > th {
border-bottom: 1px solid $border;
border-bottom: 1px solid rgba($border, 0.2);
white-space: nowrap;
&:first-child {
text-align: center;
@ -22,7 +22,7 @@
& > td {
padding: 0px 8px;
line-height: 35px;
border-top: 1px solid $border;
border-top: 1px solid rgba($border, 0.2);
&:first-child {
text-align: center;
}

View File

@ -2,14 +2,14 @@ $panel-title-height: 44px;
$panel-heading-font-size: 16px;
.panel {
@include scrollbars(.4em, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.5));
@include scrollbars(.4em, rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.7));
color: $default-text;
background-color: $default;
border: none;
border-radius: 5px;
background-color: $default;
position: relative;
margin-bottom: 24px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
&.animated {
animation-duration: 0.5s;
}
@ -40,8 +40,15 @@ $panel-heading-font-size: 16px;
}
}
.panel {
background-color: $default;
.panel.panel-blur {
$blurredBgUrl: $images-root + 'blur-bg-blurred.jpg';
background: url($blurredBgUrl);
transition: none;
background-attachment: fixed;
}
.panel-white {
background-color: white;
}
.panel > .panel-body {

View File

@ -129,11 +129,11 @@
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: 1px solid rgba(0, 0, 0, .01);
background-color: $primary-light;
background-color: rgba(0, 0, 0, 0.2);
a {
color: $default;
color: $default-text;
&:hover {
color: $default;
color: $default-text;
}
}
& > li > a {
@ -141,16 +141,16 @@
margin-bottom: 0;
border-radius: 0;
border: none;
color: $default;
color: $default-text;
&:hover {
border: none;
color: $default;
background-color: rgba(0, 0, 0, .05);
color: $default-text;
background-color: rgba(0, 0, 0, 0.2);
}
}
& > li.active > a {
color: $default;
background-color: rgba(0, 0, 0, .25);
color: $default-text;
background-color: rgba(0, 0, 0, 0.25);
}
> li:first-of-type a {
border-top-left-radius: 5px;

View File

@ -27,7 +27,7 @@
margin-left: 0;
}
& > a {
color: $default;
color: $sidebar-text;
text-decoration: none;
font-size: 13px;
position: relative;
@ -35,7 +35,7 @@
display: inline-block;
min-width: 10px;
padding: 2px 4px 2px 4px;
color: $default;
color: $sidebar-text;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
@ -125,7 +125,7 @@
margin-left: 12px;
text-decoration: none;
&:hover {
color: $default-text;
color: $dropdown-text;
}
}
}
@ -138,7 +138,7 @@
padding: 10px 12px;
display: block;
text-decoration: none;
color: $default-text;
color: $dropdown-text;
font-size: 12px;
&:first-child {
border-top: none;
@ -199,7 +199,7 @@
font-size: 12px;
text-decoration: none;
&:hover {
color: $default-text;
color: $dropdown-text;
}
}
@ -211,7 +211,7 @@
text-align: left;
border: none;
text-decoration: none;
color: $default-text;
color: $dropdown-text;
padding: 4px 16px 4px 20px;
&.signout {
border-top: 1px solid $default;

View File

@ -9,12 +9,12 @@
padding: 0 32px 0 40px;
&.scrolled {
//background-color: rgba($sidebar, 0.9)
background-color: rgba(black, 0.85)
}
}
a.al-logo {
color: $default;
color: $sidebar-text;
display: block;
font-size: 24px;
font-family: $font-family;
@ -55,7 +55,7 @@ a.al-logo {
}
a.refresh-data {
color: $default;
color: $sidebar-text;
font-size: 13px;
text-decoration: none;
font-weight: $font-normal;
@ -74,7 +74,7 @@ a.collapse-menu-link {
display: block;
text-decoration: none;
line-height: 42px;
color: $default;
color: $sidebar-text;
padding: 0;
float: left;
margin: 11px 0 0 25px;
@ -107,7 +107,7 @@ a.collapse-menu-link {
.search {
text-shadow: none;
color: $default;
color: $sidebar-text;
font-size: 13px;
line-height: 25px;
transition: all 0.5s ease;

View File

@ -38,9 +38,9 @@ $angle-right: "\f101";
&.selected:not(.with-sub-menu) {
background-color: $primary;
a.al-sidebar-list-link {
color: $default;
color: $sidebar-text;
b {
color: $default;
color: $sidebar-text;
}
}
}
@ -67,7 +67,7 @@ a.al-sidebar-list-link {
text-shadow: none;
font-size: 13px;
text-decoration: none;
color: $default;
color: $sidebar-text;
line-height: 42px;
white-space: nowrap;
overflow: hidden;
@ -96,7 +96,7 @@ a.al-sidebar-list-link {
top: 12px;
padding: 0;
text-align: center;
color: #cccccc;
color: $sidebar-text;
transition: transform 0.2s linear;
}
}
@ -136,7 +136,7 @@ a.al-sidebar-list-link {
text-shadow: none;
font-size: 13px;
text-decoration: none;
color: $default;
color: $sidebar-text;
padding-left: 52px;
height: auto;
line-height: 29px;
@ -148,7 +148,7 @@ a.al-sidebar-list-link {
border: none;
background-color: $primary;
&:hover {
color: $default;
color: $sidebar-text;
}
}

View File

@ -1,13 +1,15 @@
$default: #ffffff;
$default: rgba(#000000, 0.2);
$body-bg: #F0F3F4;
$default-text: #666666;
$help-text: #949494;
$default-text: #ffffff;
$help-text: #eeeeee;
$disabled: #dddddd;
$disabled-bg: tint($disabled, 15%);
$border: #d6d6d6;
$border-light: tint($border, 15%);
$input-border: shade($border, 5%);
$sidebar: #1C2B36;
$border: #ffffff;
$border-light: $border;// tint
$input-border: $border;// shade
$sidebar: rgba(#000000, 0.5);
$sidebar-text: #ffffff;
$dropdown-text: #7d7d7d;
$primary: #209e91 !default;
$info: #2dacd1 !default;

View File

@ -330,7 +330,7 @@ div.blurCalendar{
.fc-event,
.fc-event:hover,
.ui-widget .fc-event {
color: $default;
color: $default-text;
text-decoration: none;
}
@ -730,7 +730,7 @@ a.fc-more {
}
.fc-head{
color: $default;
color: $default-text;
background-color: $primary;
td, th{
border:none;

View File

@ -9,7 +9,7 @@
height: 260px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom: 1px solid $border;
background: rgba(0, 0, 0, 0.5);
img {
max-width: 85%;
position: absolute;

View File

@ -96,3 +96,99 @@ label.todo-checkbox {
.add-item-icon {
display: none;
}
.task-todo-container.transparent {
.todo-panel.panel {
color: white;
opacity: 0.9;
}
input.task-todo {
color: white;
width: calc(100% - 25px);
border-radius: 0;
border: none;
background: transparent;
&:focus {
outline: none;
background-color: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
}
}
.add-item-icon {
display: block;
float: right;
margin-top: -45px;
margin-right: 5px;
font-size: 25px;
cursor: pointer;
}
ul.todo-list {
li {
margin: 0;
border: none;
font-weight: $font-light;
.blur-container{
height: 40px;
position: absolute;
width: calc(100% + 40px);;
top: 0;
left: -25px;
overflow-y: hidden;
}
&:hover{
.blur-container{
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
}
.blur-box {
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);
-webkit-filter: blur(3px);
}
}
i.remove-todo {
color: white;
opacity: 0.4;
&:hover {
color: white;
opacity: 0.95;
}
}
i.mark {
min-width: 40px;
display: none;
}
label.todo-checkbox > span {
&:before {
position: absolute;
color: white;
content: '\f10c';
float: none;
margin-right: 6px;
transition: none;
}
}
&.checked {
label.todo-checkbox > span {
&:before {
margin-right: 0;
position: absolute;
content: '';
background-size: contain;
background: url($images-root + "app/todo/check-icon.png") no-repeat;
}
}
}
}
}
.box-shadow-border{
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
width: calc(100% + 44px);
margin-left: -22px;
}
}

View File

@ -67,10 +67,6 @@
height: 300px;
position: relative;
float: left;
//canvas{
// border: 10px solid rgba(0, 0, 0, 0.34902);
// border-radius: 180px;
//}
}
.traffic-text {
@ -101,11 +97,11 @@
border-radius: 0;
width: 100%;
margin-bottom: 0;
background-color: $border-light;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: none;
.progress-bar{
height: 4px;
background-color: $input-border;
background-color: $default-text;
box-shadow: none;
}
}
@ -121,17 +117,19 @@
}
.traffic-chart canvas{
border: 10px solid $default;
border: 10px solid rgba(0,0,0,0.35);
box-shadow: 0 0 5px 0 rgb(0, 0, 0) inset;
border-radius: 150px;
}
.chart-bg{
position: absolute;
border-radius: 100px;
width: 180px;
height: 180px;
left: 60px;
top: 60px;
background-color: rgba(0,0,0,0.35);
border-radius: 100px;
}
@media (max-width: $resM) {