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

refactor(global): apply new blur design

pull/3/head
alex 2016-02-10 15:06:22 +03:00
parent 7dbe00e234
commit 7cde2924d2
16 changed files with 272 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/app/pages/form/layouts/layouts.html
View File

@ -17,6 +17,21 @@
ba-panel-class="with-scroll">
<div ng-include="'app/pages/form/layouts/widgets/basicForm.html'"></div>
</div>
<div
ba-panel
ba-panel-title="Horizontal Form"
ba-panel-class="with-scroll">
<div ng-include="'app/pages/form/layouts/widgets/horizontalForm.html'"></div>
</div>
</div>
<div class="col-md-6">
<div
ba-panel
ba-panel-title="Form Without Labels"
ba-panel-class="with-scroll">
<div ng-include="'app/pages/form/layouts/widgets/formWithoutLabels.html'"></div>
</div>
<div
ba-panel
ba-panel-title="Block Form"
@ -24,20 +39,6 @@
<div ng-include="'app/pages/form/layouts/widgets/blockForm.html'"></div>
</div>
</div>
<div class="col-md-6">
<div
ba-panel
ba-panel-title="Horizontal Form"
ba-panel-class="with-scroll">
<div ng-include="'app/pages/form/layouts/widgets/horizontalForm.html'"></div>
</div>
<div
ba-panel
ba-panel-title="Form Without Labels"
ba-panel-class="with-scroll">
<div ng-include="'app/pages/form/layouts/widgets/formWithoutLabels.html'"></div>
</div>
</div>
</div>
</div>

394
src/app/pages/profile/profile.html
View File

@ -1,217 +1,211 @@
<div class="widgets">
<div class="widgets-block">
<div class="panel panel-default invisible" zoom-in>
<div class="panel-body content-panel profile-page">
<div class="panel-content">
<div class="progress-info">Your profile is 70% Complete</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
<div ba-panel ba-panel-class="profile-page">
<div class="panel-content">
<div class="progress-info">Your profile is 70% Complete</div>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
</div>
</div>
<h3 class="with-line">General Information</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group row clearfix">
<label for="inputFirstName" class="col-sm-3 control-label">Picture</label>
<div class="col-sm-9">
<div class="userpic">
<div class="userpic-wrapper">
<img ng-src="{{ picture }}" ng-click="uploadPicture()">
</div>
<i class="ion-ios-close-outline" ng-click="removePicture()" ng-if="!noPicture"></i>
<a href class="change-userpic" ng-click="uploadPicture()">Change Profile Picture</a>
<input type="file" ng-show="false" id="uploadFile" ng-file-select="onFileSelect($files)">
</div>
</div>
</div>
</div>
<div class="col-md-6"></div>
</div>
<h3 class="with-line">General Information</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group row clearfix">
<label for="inputFirstName" class="col-sm-3 control-label">First Name</label>
<div class="row">
<div class="col-md-6">
<div class="form-group row clearfix">
<label for="inputFirstName" class="col-sm-3 control-label">Picture</label>
<div class="col-sm-9">
<div class="userpic">
<div class="userpic-wrapper">
<img ng-src="{{ picture }}" ng-click="uploadPicture()">
</div>
<i class="ion-ios-close-outline" ng-click="removePicture()" ng-if="!noPicture"></i>
<a href class="change-userpic" ng-click="uploadPicture()">Change Profile Picture</a>
<input type="file" ng-show="false" id="uploadFile" ng-file-select="onFileSelect($files)">
</div>
</div>
</div>
</div>
<div class="col-md-6"></div>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputFirstName" placeholder="" value="Anastasiya">
</div>
</div>
<div class="form-group row clearfix">
<label for="inputLastName" class="col-sm-3 control-label">Last Name</label>
<div class="row">
<div class="col-md-6">
<div class="form-group row clearfix">
<label for="inputFirstName" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputFirstName" placeholder="" value="Anastasiya">
</div>
</div>
<div class="form-group row clearfix">
<label for="inputLastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputLastName" placeholder="" value="Tyshkavets">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row clearfix">
<label class="col-sm-3 control-label">Department</label>
<div class="col-sm-9">
<select class="form-control" selectpicker>
<option>Web Development</option>
<option>System Development</option>
<option>Sales</option>
<option>Human Resources</option>
</select>
</div>
</div>
<div class="form-group row clearfix">
<label for="inputOccupation" class="col-sm-3 control-label">Occupation</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputOccupation" placeholder="" value="Front End Web Developer">
</div>
</div>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputLastName" placeholder="" value="Tyshkavets">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row clearfix">
<label class="col-sm-3 control-label">Department</label>
<h3 class="with-line">Change Password</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group row clearfix">
<label for="inputPassword" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword" placeholder="" value="12345678">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row clearfix">
<label for="inputConfirmPassword" class="col-sm-3 control-label">Confirm Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputConfirmPassword" placeholder="">
</div>
</div>
</div>
<div class="col-sm-9">
<select class="form-control" selectpicker>
<option>Web Development</option>
<option>System Development</option>
<option>Sales</option>
<option>Human Resources</option>
</select>
</div>
</div>
<h3 class="with-line">Contact Information</h3>
<div class="form-group row clearfix">
<label for="inputOccupation" class="col-sm-3 control-label">Occupation</label>
<div class="row">
<div class="col-md-6">
<div class="form-group row clearfix">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="" value="tyshkavets@gmail.com">
</div>
</div>
<div class="form-group row clearfix">
<label for="inputPhone" class="col-sm-3 control-label">Phone</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputPhone" placeholder="" value="+1 (23) 456 7890">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row clearfix">
<label class="col-sm-3 control-label">Office Location</label>
<div class="col-sm-9">
<select class="form-control" title="Standard Select" selectpicker>
<option>San Francisco</option>
<option>London</option>
<option>Minsk</option>
<option>Tokio</option>
</select>
</div>
</div>
<div class="form-group row clearfix">
<label for="inputRoom" class="col-sm-3 control-label">Room</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputRoom" placeholder="" value="303">
</div>
</div>
</div>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputOccupation" placeholder="" value="Front End Web Developer">
</div>
<h3 class="with-line">Social Profiles</h3>
<div class="social-profiles row clearfix">
<div class="col-md-3 col-sm-4" ng-repeat="item in socialProfiles">
<a class="sn-link" href ng-click="showModal(item)" ng-if="!item.href">
<i class="socicon {{ item.icon }}"></i>
<span>{{ item.name }}</span>
</a>
<a class="sn-link connected" href="{{ item.href }}" target="_blank" ng-if="item.href">
<i class="socicon {{ item.icon }}"></i>
<span>{{ item.name }}</span>
<em class="ion-ios-close-empty sn-link-close" ng-mousedown="unconnect(item)"></em>
</a>
</div>
</div>
<h3 class="with-line">Send Email Notifications</h3>
<div class="notification row clearfix">
<div class="col-sm-6">
<div class="form-group row clearfix">
<label class="col-xs-8">When I receive a message</label>
<div class="col-xs-4">
<switch color="success" ng-model="switches[0]"></switch>
</div>
</div>
<div class="form-group row clearfix">
<label class="col-xs-8">When Someone sends me an invitation</label>
<div class="col-xs-4">
<switch color="success" ng-model="switches[1]"></switch>
</div>
</div>
<div class="form-group row clearfix">
<label class="col-xs-8">When profile information changes</label>
<div class="col-xs-4">
<switch color="success" ng-model="switches[2]"></switch>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group row clearfix">
<label class="col-xs-8">When anyone logs into your account from a new device or browser</label>
<div class="col-xs-4">
<switch color="success" ng-model="switches[3]"></switch>
</div>
</div>
<div class="form-group row clearfix">
<label class="col-xs-8">Weekly Reports</label>
<div class="col-xs-4">
<switch color="success" ng-model="switches[4]"></switch>
</div>
</div>
<div class="form-group row clearfix">
<label class="col-xs-8">Daily Reports</label>
<div class="col-xs-4">
<switch color="success" ng-model="switches[5]"></switch>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-success btn-with-icon save-profile">
<i class="ion-android-checkmark-circle"></i>Update Profile
</button>
</div>
</div>
</div>
<h3 class="with-line">Change Password</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group row clearfix">
<label for="inputPassword" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword" placeholder="" value="12345678">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row clearfix">
<label for="inputConfirmPassword" class="col-sm-3 control-label">Confirm Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputConfirmPassword" placeholder="">
</div>
</div>
</div>
</div>
<h3 class="with-line">Contact Information</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group row clearfix">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="" value="tyshkavets@gmail.com">
</div>
</div>
<div class="form-group row clearfix">
<label for="inputPhone" class="col-sm-3 control-label">Phone</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputPhone" placeholder="" value="+1 (23) 456 7890">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row clearfix">
<label class="col-sm-3 control-label">Office Location</label>
<div class="col-sm-9">
<select class="form-control" title="Standard Select" selectpicker>
<option>San Francisco</option>
<option>London</option>
<option>Minsk</option>
<option>Tokio</option>
</select>
</div>
</div>
<div class="form-group row clearfix">
<label for="inputRoom" class="col-sm-3 control-label">Room</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputRoom" placeholder="" value="303">
</div>
</div>
</div>
</div>
<h3 class="with-line">Social Profiles</h3>
<div class="social-profiles row clearfix">
<div class="col-md-3 col-sm-4" ng-repeat="item in socialProfiles">
<a class="sn-link" href ng-click="showModal(item)" ng-if="!item.href">
<i class="socicon {{ item.icon }}"></i>
<span>{{ item.name }}</span>
</a>
<a class="sn-link connected" href="{{ item.href }}" target="_blank" ng-if="item.href">
<i class="socicon {{ item.icon }}"></i>
<span>{{ item.name }}</span>
<em class="ion-ios-close-empty sn-link-close" ng-mousedown="unconnect(item)"></em>
</a>
</div>
</div>
<h3 class="with-line">Send Email Notifications</h3>
<div class="notification row clearfix">
<div class="col-sm-6">
<div class="form-group row clearfix">
<label class="col-xs-8">When I receive a message</label>
<div class="col-xs-4">
<switch color="success" ng-model="switches[0]"></switch>
</div>
</div>
<div class="form-group row clearfix">
<label class="col-xs-8">When Someone sends me an invitation</label>
<div class="col-xs-4">
<switch color="success" ng-model="switches[1]"></switch>
</div>
</div>
<div class="form-group row clearfix">
<label class="col-xs-8">When profile information changes</label>
<div class="col-xs-4">
<switch color="success" ng-model="switches[2]"></switch>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group row clearfix">
<label class="col-xs-8">When anyone logs into your account from a new device or browser</label>
<div class="col-xs-4">
<switch color="success" ng-model="switches[3]"></switch>
</div>
</div>
<div class="form-group row clearfix">
<label class="col-xs-8">Weekly Reports</label>
<div class="col-xs-4">
<switch color="success" ng-model="switches[4]"></switch>
</div>
</div>
<div class="form-group row clearfix">
<label class="col-xs-8">Daily Reports</label>
<div class="col-xs-4">
<switch color="success" ng-model="switches[5]"></switch>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-success btn-with-icon save-profile">
<i class="ion-android-checkmark-circle"></i>Update Profile
</button>
</div>
</div>

12
src/app/pages/ui/alerts/alerts.html
View File

@ -25,7 +25,7 @@
ba-panel
ba-panel-title="Dismissible alerts"
ba-panel-class="with-scroll">
<div>
<div class="default-color">
<div class="alert bg-success closeable" role="alert"><button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
@ -49,7 +49,7 @@
ba-panel
ba-panel-title="Links in alerts"
ba-panel-class="with-scroll">
<div>
<div class="default-color">
<div class="alert bg-success">
<strong>Well done!</strong> You successfully read <a href class="alert-link">this important alert message</a>.
</div>
@ -69,13 +69,13 @@
ba-panel
ba-panel-title="Composite alerts"
ba-panel-class="with-scroll">
<div>
<div class="default-color">
<div class="alert bg-warning">
<h4>Warning!</h4>
<h4 class="default-color">Warning!</h4>
<strong>Pay attention.</strong> Change a few things up and try submitting again.
<div class="control-alert">
<button type="button" class="btn btn-warning ">Pay Attention</button>
<button type="button" class="btn btn-default ">Ignore</button>
<button type="button" class="btn btn-warning">Pay Attention</button>
<button type="button" class="btn btn-primary">Ignore</button>
</div>
</div>
</div>

2
src/app/pages/ui/grid/baseGrid.html
View File

@ -134,7 +134,7 @@
<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 class="default-color">Resize your viewport or check it out on your phone for an example.</p></div>
<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>

2
src/app/theme/components/baWizard/baWizard.html
View File

@ -6,7 +6,7 @@
</div>
<div class="progress ba-wizard-progress">
<div class="progress-bar progress-bar-info active" role="progressbar"
<div class="progress-bar progress-bar-danger active" role="progressbar"
aria-valuemin="0" aria-valuemax="100" ng-style="{width: $baWizardController.progress + '%'}">
</div>
</div>

2
src/app/theme/components/sidebar/sidebar.html
View File

@ -18,7 +18,7 @@
<ul ng-if="item.subMenu" class="al-sidebar-sublist"
ng-class="{expanded: item.selected, 'slide-right': item.slideRight}">
<li ng-repeat="subitem in item.subMenu" ng-class="{selected: subitem.selected}">
<li ng-repeat="subitem in item.subMenu" ng-class="{'selected': subitem.selected, 'with-sub-menu': item.subMenu}">
<a ng-if="subitem.subMenu" href ng-click="toggleSubMenu($event, subitem);"
class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>
<b class="fa" ng-class="{'fa-angle-up': subitem.selected, 'fa-angle-down': !subitem.selected}"

10
src/sass/app/_form.scss
View File

@ -366,11 +366,19 @@ label.custom-input-danger {
font-size: 18px;
}
.bootstrap-select{
.btn-default{
&:focus{
color: $default-text;
}
}
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
background: transparent;
color: $disabled;
border-color: $disabled-bg;
@include placeholderStyle($disabled);
@include placeholderStyle($disabled, 1);
}
.form-control-rounded {

14
src/sass/app/_grid.scss
View File

@ -5,7 +5,7 @@
color: $default-text;
text-align: center;
font-size: 18px;
background-color: $border-light;;
background-color: $border-light;
padding: 12px 5px;
}
}
@ -16,4 +16,14 @@
&:first-child{
margin-top: 0;
}
}
}
body.badmin-transparent {
.show-grid div[class^=col-]{
div {
color: $default;
background-color: rgba(255, 255, 255, 0.3);
}
}
}

4
src/sass/app/_modals.scss
View File

@ -45,6 +45,10 @@
}
}
.modal-content .modal-header .modal-title{
color: $default-text;
}
.message-modal {
.modal-header {
text-align: center;

1
src/sass/app/maps/_leaflet.scss
View File

@ -430,6 +430,7 @@
.leaflet-popup-content {
margin: 13px 19px;
line-height: 1.4;
color: $default-text;
}
.leaflet-popup-content p {

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

@ -24,8 +24,9 @@
text-align: center;
font-weight: $font-light;
font-size: 18px;
opacity: 0.7;
&.active {
color: $primary-dark;
opacity: 0.95;
}
}
}

4
src/sass/theme/components/_sidebar.scss
View File

@ -109,7 +109,7 @@ a.al-sidebar-list-link {
&.expanded {
display: block;
}
li {
> li {
display: block;
float: none;
padding: 0;
@ -128,7 +128,7 @@ a.al-sidebar-list-link {
color: $success;
}
}
&.selected {
> &.selected:not(.with-sub-menu) {
a {
border: none;
background-color: $success;

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

@ -60,20 +60,24 @@
background: rgba(0, 0, 0, $opacity);
}
@mixin placeholderStyle($color) {
@mixin placeholderStyle($color, $opacity) {
&::-webkit-input-placeholder {
color: $color;
opacity: $opacity;
}
&:-moz-placeholder {
/* Firefox 18- */
color: $color;
opacity: $opacity;
}
&::-moz-placeholder {
/* Firefox 19+ */
color: $color;
opacity: $opacity;
}
&:-ms-input-placeholder {
color: $color;
opacity: $opacity;
}
}
@ -93,7 +97,8 @@
.panel-title>small,
.panel-title>small>a,
.traffic-text span,
.form-group label {
.form-group label,
.help-block{
color: $color;
}
.traffic-text {

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

@ -7,27 +7,16 @@ $warning: #b9f2a1 !default;
$danger: #ffa76d !default;
$default: #ffffff !default;
$primary-dark: shade($primary, 66%);
$success-dark: shade($success, 66%);
$warning-dark: shade($warning, 66%);
$danger-dark: shade($danger, 66%);
$primary-dark: #003e4b;
$danger-dark: #c37350;
$success-dark: #18524b;
$warning-dark: #8adc68;
$primary-bg: tint($primary, 70%);
$info-bg: tint($info, 70%);
$success-bg: tint($success, 70%);
$warning-bg: tint($warning, 70%);
$danger-bg: tint($danger, 70%);
$primaryDark: #003e4b;
$dangerDark: #c37350;
$successDark: #18524b;
$warningDark: #8adc68;
$primaryBg: #0d8da2;
$successBg: #02b6a2;
$dangerBg: #ffcd92;
$infoBg: #a8e6b3;
$warningBg: #e4fbd3;
$primary-bg: #0d8da2;
$success-bg: #02b6a2;
$danger-bg: #ffcd92;
$info-bg: #a8e6b3;
$warning-bg: #e4fbd3;
$primary-light: #5FBCBB;
$success-light: #85BA54;

4
src/sass/theme/dashboard/_todo.scss
View File

@ -137,10 +137,6 @@ body.badmin-transparent {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
}
&::-webkit-input-placeholder {
color: white;
opacity: 0.6;
}
}
.add-item-icon {
display: block;

8
src/sass/theme/skins/_02_transparent.scss
View File

@ -15,4 +15,12 @@ body.badmin-transparent {
.btn-default{
color: $default;
}
.form-control, .bootstrap-tagsinput input {
@include placeholderStyle($default, 0.8);
background-color: transparent;
color: $default;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
@include placeholderStyle($default, 0.6);
}
}