Skip to content

Instantly share code, notes, and snippets.

@Overbrd

Overbrd/angular-dashboard.markdown

Created March 4, 2020 20:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Overbrd/ff28cc1b121081ed21eb5000668722c4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Overbrd/ff28cc1b121081ed21eb5000668722c4 to your computer and use it in GitHub Desktop.
Download ZIP
Angular Dashboard
Raw
angular-dashboard.markdown
Raw
index.html
<section>
<header>
<nav class="rad-navigation">
<div class="rad-logo-container">
<a href="#" class="rad-logo"><i class=" fa fa-recycle"></i> Radar</a>
<a href="#" class="rad-toggle-btn pull-right"><i class="fa fa-bars"></i></a>
</div>
<a href="#" class="rad-logo-hidden">Radar</a>
<div class="rad-top-nav-container">
<a href="" class="brand-icon"><i class="fa fa-recycle"></i></a>
<ul class="pull-right links">
<li class="rad-dropdown no-color">
<a class="rad-menu-item" href="#"><img class="rad-list-img sm-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></a>
<ul class="rad-dropmenu-item sm-menu">
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="#"><i class="fa fa-edit"></i> My Profile</a>
</li>
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="#"><i class="fa fa-power-off"></i> Sign out</a>
</li>
</ul>
</li>
<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-cog"></i></a>
<ul class="rad-dropmenu-item rad-settings">
<li class="rad-dropmenu-header"><a href="#">Settings</a></li>
<li class="rad-notification-item text-left">
<div class="pull-left"><i class="fa fa-link"></i></div>
<div class="pull-right">
<label class="rad-chk-pin pull-right">
<input type="checkbox" /><span></span></label>
</div>
<div class="rad-notification-body">
<div class="lg-text">Change to Flat Theme</div>
<div class="sm-text">Flattify it</div>
</div>
</li>
<li id="rad-color-opts" class="rad-notification-item text-left hide">
<div class="pull-left"><i class="fa fa-puzzle-piece"></i></div>
<div class="pull-right">
<div class="rad-color-swatch">
<label class="colors rad-bg-crimson">
<input type="radio" name="color" value="crimson" />
</label>
<label class="colors rad-bg-teal">
<input type="radio" name="color" value="teal" />
</label>
<label class="colors rad-bg-purple">
<input type="radio" name="color" value="purple">
</label>
<label class="colors rad-bg-orange">
<input type="radio" name="color" value="orange" />
</label>
<label class="colors rad-bg-twitter">
<input type="radio" name="color" value="twitter" />
</label>
</div>
</div>
<div class="rad-notification-body">
<div class="lg-text">Choose a color</div>
<div class="sm-text">Make it colorful</div>
</div>
</li>
</ul>
</li>
</ul>
<ul class="pull-right links">
<li>
<a class="rad-menu-item" href="#"><i class="fa fa-comment-o"><span class="rad-menu-badge rad-bg-success">0</span></i></a>
</li>
<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-envelope-o"><span class="rad-menu-badge rad-bg-primary">23</span></i></a>
<ul class="rad-dropmenu-item">
<li class="rad-dropmenu-header"><a href="#">Your Notifications</a></li>
<li class="rad-notification-item text-left">
<a class="rad-notification-content" href="#">
<div class="pull-left"><i class="fa fa-html5 fa-2x"></i>
</div>
<div class="rad-notification-body">
<div class="lg-text">Introduction to fetch()</div>
<div class="sm-text">The fetch API</div>
</div>
</a>
</li>
<li class="rad-notification-item text-left">
<a class="rad-notification-content" href="#">
<div class="pull-left"><i class="fa fa-bitbucket fa-2x"></i>
</div>
<div class="rad-notification-body">
<div class="lg-text">Check your BitBucket</div>
<div class="sm-text">Last Chance</div>
</div>
</a>
</li>
<li class="rad-notification-item text-left">
<a class="rad-notification-content" href="#">
<div class="pull-left"><i class="fa fa-google fa-2x"></i>
</div>
<div class="rad-notification-body">
<div class="lg-text">Google Account</div>
<div class="sm-text">[email protected]</div>
</div>
</a>
</li>
<li class="rad-dropmenu-footer"><a href="#">See all notifications</a></li>
</ul>
</li>
<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-bell-o"><span class="rad-menu-badge">49</span></i></a>
<ul class="rad-dropmenu-item">
<li class="rad-dropmenu-header"><a href="#">Your Alerts</a></li>
<li class="rad-notification-item text-left">
<a class="rad-notification-content" href="#">
<div class="pull-left"><i class="fa fa-html5 fa-2x"></i>
</div>
<div class="rad-notification-body">
<div class="lg-text">Introduction to fetch()</div>
<div class="sm-text">The fetch API</div>
<em class="pull-right sm-text"><i class="fa fa-clock-o"></i> 2 sec ago</em>
</div>
</a>
</li>
<li class="rad-notification-item text-left">
<a class="rad-notification-content" href="#">
<div class="pull-left"><i class="fa fa-bitbucket fa-2x"></i>
</div>
<div class="rad-notification-body">
<div class="lg-text">Check your BitBucket</div>
<div class="sm-text">Last Chance</div>
<em class="pull-right sm-text"><i class="fa fa-clock-o"></i> 49 mins ago</em>
</div>
</a>
</li>
<li class="rad-notification-item text-left">
<a class="rad-notification-content" href="#">
<div class="pull-left"><i class="fa fa-google fa-2x"></i>
</div>
<div class="rad-notification-body">
<div class="lg-text">Google Account</div>
<div class="sm-text">[email protected]</div>
<em class="pull-right sm-text"><i class="fa fa-clock-o"></i> 2 days ago</em>
</div>
</a>
</li>
<li class="rad-dropmenu-footer"><a href="#">See all alerts</a></li>
</ul>
</li>
<!--<li class="rad-dropdown"><a class="rad-menu-item" href="#"><i class="fa fa-cog"></i></a>
<ul class="rad-dropmenu-item rad-settings">
<li class="rad-dropmenu-header"><a href="#">Settings</a></li>
<li class="rad-notification-item text-left">
<div class="pull-left"><i class="fa fa-link"></i></div>
<div class="pull-right"><label class="rad-chk-pin pull-right">
<input type="checkbox"/><span></span></label></div>
<div class="rad-notification-body">
<div class="lg-text">Change to Flat Theme</div>
<div class="sm-text">Flattify it</div>
</div>
</li>
<li id="rad-color-opts" class="rad-notification-item text-left hide">
<div class="pull-left"><i class="fa fa-puzzle-piece"></i></div>
<div class="pull-right">
<div class="rad-color-swatch">
<label class="colors rad-bg-crimson rad-option-selected"><input type="radio" checked name="color" value="crimson"/></label>
<label class="colors rad-bg-teal"><input type="radio" name="color" value="teal"/></label>
<label class="colors rad-bg-orange"><input type="radio" name="color" value="orange"/></label>
</div>
</div>
<div class="rad-notification-body">
<div class="lg-text">Choose a color</div>
<div class="sm-text">Make it colorful</div>
</div>
</li>
</ul>
</li>
<li class="rad-dropdown">
<a class="rad-menu-item" href="#"><img class="rad-list-img sm-img" src="https://lh4.googleusercontent.com/-GXmmnYTuWkg/AAAAAAAAAAI/AAAAAAAAAAA/oK6DEDS7grM/w56-h56/photo.jpg" alt="me" /></a>
<ul class="rad-dropmenu-item sm-menu">
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="#"><i class="fa fa-edit"></i> My Profile</a>
</li>
<li class="rad-notification-item">
<a class="rad-notification-content lg-text" href="#"><i class="fa fa-power-off"></i> Sign out</a>
</li>
</ul>
</li>-->
</ul>
</div>
</nav>
</header>
</section>
<aside>
<nav class="rad-sidebar rad-nav-min">
<ul>
<li>
<a href="#" class="inbox">
<i class="fa fa-dashboard"><span class="icon-bg rad-bg-success"></span></i>
<span class="rad-sidebar-item">Dashboard</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bar-chart-o">
<span class="icon-bg rad-bg-danger"></span>
</i>
<span class="rad-sidebar-item">Ticket status</span>
</a>
</li>
<li><a href="#" class="snooz"><i class="fa fa-line-chart"><span class="icon-bg rad-bg-primary"></span></i><span class="rad-sidebar-item">Call trends</span></a></li>
<li><a href="#" class="done"><i class="fa fa-area-chart"><span class="icon-bg rad-bg-warning"></span></i><span class="rad-sidebar-item">Heat maps</span></a></li>
<li>
<a href="#">
<i class="fa fa-wrench"><span class="icon-bg rad-bg-violet"></span></i>
<span class="rad-sidebar-item">Settings</span>
</a>
</li>
</ul>
</nav>
</aside>
<main>
<section>
<div class="rad-body-wrapper rad-nav-min">
<div class="container-fluid">
<rad-dashboard-app>
<header class="rad-page-title">
<button class="btn" ng-click="save()">
<i class="fa fa-save"></i>Save Dashboard</button>
<button class="btn" ng-click="addPanel({})">
<i class="fa fa-plus"></i>Add</button>
<h1>Dashboard</h1>
<small class="md-txt">Welcome Sathish,
<a href="#" target="_blank">
<i class="fa fa-map-marker rad-txt-danger"></i> California</a>
</small>
</header>
<rad-dashboard-grid></rad-dashboard-grid>
</rad-dashboard-app>
</div>
</div>
</section>
</main>
<script type="text/ng-template" id="radDashboardGrid.html">
<div gridster="gridsterOptions">
<div class="chart-wrapper" gridster-item="item" ng-repeat="item in widgets">
<rad-panel></rad-panel>
</div>
</div>
</script>
<script type="text/ng-template" id="radPanel.html">
<div class="panel panel-default gridster-item-resizable-handler">
<div class="panel-heading">
<h3 class="panel-title">{{item.name}}
<ul class="rad-panel-action">
<li><i class="fa fa-chevron-down"></i></li>
<li><i class="fa fa-rotate-right" ng-click="refresh(item)"></i></li>
<li><i class="fa fa-cog" ng-click="updatePanel(item)"></i></li>
<li><i class="fa fa-close" ng-click="remove(item)"></i></li>
<ul>
</h3>
</div>
<div class="panel-body">
<div class="rad-chart">
<nvd3 options='item.chart' data='data' api="item.chart.api"></nvd3>
</div>
</div>
</div>
</script>
<script type="text/ng-template" id="settings.html">
<div class="panel-heading"><h3 class="panel-title">Settings
<ul class="rad-panel-action"><li><i class="fa fa-close" ng-click="cancel()"></i></li><ul>
</h3></div>
<div class="panel-body">
<div class="form-group">
<label for="panelName">Name</label>
<input id="panelName" type="text" class="form-control" ng-model="panel.name"/>
</div>
<div class="form-group">
<label for="vizType">Visualization type</label>
<select id="vizType" class="form-control" ng-model="panel.vizType">
<option value="">Select a viz</option>
<option value="lineChart">Line</option>
<option value="areaChart">Area</option>
<option value="discreteBarChart">Bar</option>
<option value="pieChart">Pie</option>
<option value="map">Map</option>
</select>
</div>
<div class="form-group">
<label for="xKey">x Axis</label>
<input id="xKey" type="text" class="form-control" ng-model="panel.xKey"/>
</div>
<div class="form-group">
<label for="yKey">y Axis</label>
<input id="yKey" type="text" class="form-control" ng-model="panel.yKey"/>
</div>
</div>
<div class="panel-footer text-right">
<button class="btn btn-primary" type="button" ng-click="ok()">Save</button>
<button class="btn btn-danger" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
Raw
script.js
///Last modified 10/13/2015
//Sathish kumar
//Added theming
;
(function() {
$(function() {
$(window).on("scroll", function(e) {
if ($(window).scrollTop() > 50) {
$("body").addClass("sticky");
} else {
$("body").removeClass("sticky");
}
});
$(document).on("click", function(e) {
e.preventDefault();
var $item = $(".rad-dropmenu-item");
if ($item.hasClass("active")) {
$item.removeClass("active");
}
});
$(".rad-toggle-btn").on('click', function() {
$(".rad-logo-container").toggleClass("rad-nav-min");
$(".rad-sidebar").toggleClass("rad-nav-min");
$(".rad-body-wrapper").toggleClass("rad-nav-min");
});
$("li.rad-dropdown > a.rad-menu-item").on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$(".rad-dropmenu-item").removeClass("active");
$(this).next(".rad-dropmenu-item").toggleClass("active");
});
$('.rad-chk-pin input[type=checkbox]').change(function(e) {
var $body = $('body');
$body.removeClass();
$("#rad-color-opts").toggleClass("hide");
if ($(this).is(":checked")) {
$body.addClass("flat-theme");
$('.rad-color-swatch label').removeClass("rad-option-selected");
$('.rad-color-swatch input[type=radio]').removeAttr('checked');
}
});
$('.rad-color-swatch input[type=radio]').change(function(e) {
if ($('.rad-chk-pin input[type=checkbox]').is(":checked")) {
$('body').removeClass().addClass("flat-theme").addClass(this.value);
$('.rad-color-swatch label').removeClass("rad-option-selected");
$(this).parent().addClass("rad-option-selected");
$(window).scrollTop(0);
} else {
return false;
}
});
$(".rad-notification-item").on("click", function(e) {
e.stopPropagation();
});
});
$(function() {
var app = angular.module('Radar', ['ui.bootstrap','gridster','nvd3']);
app.directive('radDashboardApp', function() {
return {
controller: function($scope, $uibModal) {
$scope.widgets = [];
var i =0;
$scope.addPanel = function() {
var modalInstance = $uibModal.open({
templateUrl: 'settings.html',
controller: function ($scope, $modalInstance) {
$scope.panel = {name: "Pie" + ++i, vizType: "pieChart", xKey: "key", yKey: "y"};
$scope.ok = function () {
$modalInstance.close($scope.panel);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
modalInstance.result.then(function (widget) {
widget.chart = {
chart: {
type: widget.vizType,
showLabels: false,
donut: true,
color : [ '#E67A77', '#D9DD81', '#79D1CF', '#95D7BB'],
x: function(d){return d[widget.xKey];},
y: function(d){return d[widget.yKey];}
}
};
widget.sizeX = 3;
widget.sizeY = 3;
widget.id = i;
$scope.widgets.push(widget);
});
};
$scope.save = function(){
console.log($scope.widgets);
}
$scope.data = [
{
key: "One",
y: 5
},
{
key: "Two",
y: 2
},
{
key: "Three",
y: 9
},
{
key: "Four",
y: 7
},
{
key: "Five",
y: 4
},
{
key: "Six",
y: 3
},
{
key: "Seven",
y: .5
}
];
}
}
});
app.directive('radDashboardGrid', function($timeout, $window) {
return {
restrict: "E",
require: "^radDashboardApp",
templateUrl: 'radDashboardGrid.html',
controller: function($scope) {
$scope.gridsterOptions = {
columns: 12,
minSizeX: 3,
minSizeY: 3,
margins: [10, 10],
outerMargin: false,
mobileBreakPoint: 650,
resizable: {
stop: function (event, $element, widget) {
$timeout(function () {
widget.chart.api.update();
}, 500);
}
}
};
angular.element($window).on('resize', function () {
$timeout(function() {
$scope.widgets.forEach(function(item){
item.chart.api.update();
});
},1000);
});
},
link: function(scope, $el){
}
}
});
app.directive('radPanel', function($compile, $uibModal) {
return {
resctrict: "E",
require: "^radDashboardGrid",
templateUrl: 'radPanel.html',
controller: function($scope) {
$scope.updatePanel = function(item) {
var modalInstance = $uibModal.open({
templateUrl: 'settings.html',
controller: function ($scope, $modalInstance, panel) {
$scope.panel = angular.copy(panel);
$scope.ok = function () {
$modalInstance.close($scope.panel);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
panel: function () {
return item;
}
}
});
modalInstance.result.then(function (updatedPanel) {
angular.copy(updatedPanel, item)
});
};
$scope.refresh = function(item) {
alert('refreshed panel with id: ' + item.id);
};
$scope.remove = function(item) {
var index = findIndex($scope.widgets, "id", item.id);
console.log(index);
if (index > -1)
$scope.widgets.splice(index, 1);
};
function findIndex(array, key, value) {
for (var i = 0; i < array.length; i++) {
if (array[i][key] == value) {
return i;
}
}
return -1;
}
}
}
});
angular.bootstrap($("body"), ["Radar"]);
});
}());
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.1/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://rawgit.com/novus/nvd3/v1.1.15-beta/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v0.1.1/dist/angular-nvd3.js"></script>
<script src="https://gridster.net/dist/jquery.gridster.js"></script>
<script src="https://rawgit.com/ManifestWebDesign/angular-gridster/master/dist/angular-gridster.min.js"></script>
Raw
style.scss
//Vendor prefixes not added
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
$logo-color:#222533;
$base-color: white;
$text-color: #515d6e;
$font-size:13px;
*{
box-sizing:border-box;
}
body{
background:#f0f0f0;
line-height:normal;
font-size: $font-size + 3;
overflow-Y:scroll;
font-family: 'Roboto Condensed', "Helvetica Neue",Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased !important;
}
a,a:hover, a:visited, a:link, a:active{
text-decoration : none;
}
a:active{
color:#fff !important;
}
.sm-img{
height:30px !important;
width:30px !important;
}
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }
.rad-page-title{
margin-bottom:20px;
text-shadow: 1px 4px 6px #c6c6c6, 0 0 0 #000, 1px 4px 6px #c6c6c6;
button{
float:right;
min-width:100px;
height: 45px;
text-align:left;
margin-right:15px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
border-radius: 0;
background: white;
border:none !important;
outline:none !important;
i{
margin:0 10px;
}
}
h1{
font-size:22px;
font-weight:500;
display:block;
margin:0;
}
}
.rad-navigation{
position:fixed;
left:0;right:0;top:0;
box-shadow:0 0px 9px 4px rgba(#000, .1), 0 -5px 2px 2px rgba(#000, .1);
background:$base-color;
z-index:10000;
text-align:center;
ul{
margin-bottom:0;
}
}
.rad-logo-hidden{
line-height: 75px;
font-weight: 900;
text-transform: uppercase;
font-size: 22px;
text-decoration:none;
color: $logo-color;
opacity:0;
visibility:hidden;
position:absolute;
left:50%;
transition:all .2s ease-in-out;
}
.links{
margin-right: 10px;
position:relative;
>li{
list-style:none;
position:relative;
margin:10px;
display:inline-block;
}
}
.rad-dropmenu-item.active{
display:block;
-webkit-animation:flipInX 1s ease;
}
.lg-text{
font-size:13px;
font-weight:600;
color:#333;
}
.sm-text{
font-size:11px;
color:#c6c6c6;
}
.md-text{
font-size:12px;
color:#c6c6c6;
}
.rad-notification-item{
width:100%;
padding:15px;
border-bottom:1px solid #EEEEEE;
&:hover{
background:#F5F5F5;
}
.rad-notification-content{
color: lighten(#333,5);
}
}
.rad-notification-body{
color:black;
vertical-align:middle;
margin-left:30px;
}
.rad-logo-container{
width:225px;
text-align:center;
height:50px;
float:left;
transition:all .2s ease-in-out;
}
.rad-top-nav-container{
float:right;
transition:all .2s ease-in-out;
}
.rad-toggle-btn,
.rad-logo{
text-decoration:none;
position:relative;
height:50px;
line-height:50px;
padding:0 15px;
font-size:22px;
font-weight:900;
text-transform:uppercase;
text-decoration:none;
color: $logo-color;
display:inline-block;
}
.rad-logo i {
padding-top: 2px;
vertical-align: middle;
margin-right: 10px;
}
.rad-toggle-btn:hover{
background:lighten(#c6c6c6,20);
}
.rad-menu-item{
position:relative;
padding:0 5px;
line-height:30px;
height:30px;
color:#89949B;
z-index:5;
display:inline-block;
}
.rad-badge{
height:20px;
color: $base-color;
border-radius:10px;
line-height:20px;
font-size:12px;
background:#E94B3B;
box-shadow:.5px .2px 1px rgba(#000,.5);
display:inline-block;
text-align:center;
}
.rad-menu-badge{
position:absolute;
min-width:20px;
min-height:20px;
line-height:20px;
font-weight:bold;
color: $base-color;
border-radius:100%;
font-size:12px;
background:#E94B3B;
box-shadow:.5px .2px 1px rgba(#000,.5);
display:inline-block;
text-align:center;
top:-10px;
z-index:1;
}
.sm-menu{
min-width:150px !important;
>li{
padding:10px;
text-align:left;
i{
margin:0 10px 0 0;
}
>a{
padding:10px;
}
}
}
.rad-dropmenu-item{
position:absolute;
right:-6px;
top:45px;
min-width:250px;
background: $base-color;
border:1px solid #BDBDBD;
border-top:5px solid $text-color;
border-radius:2px;
box-shadow:0 0 5px rgba(#000, .15);
display:none;
&:before{
content:"";
position: absolute;
border-width:0 10px 10px 10px;
border-style:solid;
border-color: $text-color transparent;
top:-14px;
right:8px;
}
}
.rad-dropmenu-item.rad-settings{
right: 0 !important;
left: auto !important;
&:before{
right: 5px !important;
left: auto !important;
}
>.rad-notification-item {
&:hover{
background: #fff !important;
}
i{
font-size:24px;
}
}
}
.rad-dropmenu-footer,
.rad-dropmenu-header{
display:block !important;
background:#CFD8DC;
text-transform:uppercase;
font-size:12px;
margin:0 !important;
padding:6px;
text-align:center;
>a{
color: white;//#98A0A3;
line-height:12px;
text-decoration:none;
}
}
.rad-dropmenu-header{
border-bottom:1px solid #CFD8DC;
}
.rad-dropmenu-footer{
border-top:1px solid #CFD8DC;
}
.rad-chk-pin {
margin:0 !important;
span {
display: inline-block;
position: relative;
height: 20px;
width: 40px;
border-radius: 4px;
background: crimson;
border: 1px solid #f6f6f6;
&:after {
content: "";
position: absolute;
background: white;
width: 20px;
height: 20px;
border-radius: 4px;
top: -1px;
left: 0px;
box-shadow: 0 0 .5px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all .2s ease;
transition: all .2s ease;
}
}
input {
display: none;
&:checked + span {
background: #23AE89;
&:after {
left: 19px;
}
}
}
}
.hide{
display:none;
}
.rad-option-selected{
box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 -2px 4px rgba(0,0,0,.2);
transform: scale(1.1);
transition: all .2s linear;
}
.rad-color-swatch{
display:table;
width: 90px;
height:25px;
border-radius:4px;
.colors{
width:25px;
height:25px;
display:table-cell;
cursor:pointer;
input[type="radio"]{
display:none;
}
}
.colors:first-child{
border-top-left-radius:4px;
border-bottom-left-radius:4px;
}
.colors:last-child{
border-top-right-radius:4px;
border-bottom-right-radius:4px;
}
}
.rad-sidebar{
z-index:9999;
position:fixed;
font-weight:600;
background: $base-color !important;
width:225px;
height:100vh;
top:50px;
left:0;
box-shadow: 0 0 4px rgba(0,0,0,.14),2px 4px 8px rgba(0,0,0,.28);
transition:all .2s ease-in-out;
li{
text-align:left;
height:45px;
font-size: 14px;
font-weight:500;
letter-spacing:.025em;
line-height:1.5;
a{
text-decoration:none;
display:block;
color:$text-color;
i{
position:relative;
width:45px;
line-height:45px;
text-align:center;
&:before{
z-index:10;
position:relative;
}
}
>span{
display: inline-block;
visibility:visible;
opacity:1;
padding-left:10px;
-webkit-transition:all .2s ease-in-out .2s;
transform:translate3d(0,0,0);
text-transform: uppercase;
font-size: 11px;
}
}
&:hover{
background: darken($base-color,5);
.icon-bg{
transform:translate3d(0,0,0);
}
a>i{
color: white;
}
}
}
}
.icon-bg{
position:absolute;
left:0;top:0;bottom:0;
z-index:1;
width:100%;
transform:translate3d(-43px,0,0);
transition: all .2s ease-in-out;
}
.rad-txt-primary{
color:#1C7EBB;
}
.rad-bg-primary{
background:#1C7EBB;
}
.rad-txt-success{
color:#23AE89;
}
.rad-bg-success{
background:#23AE89;
}
.rad-txt-danger{
color:#E94B3B;
}
.rad-bg-danger{
background:#E94B3B;
}
.rad-txt-warning{
color:#F98E33;
}
.rad-bg-warning{
background:#F98E33;
}
.rad-txt-violet{
color:#6A55C2;
}
.rad-bg-violet{
background:#6A55C2;
}
.rad-logo-container.rad-nav-min{
transform:translate3d(-180px,0,0);
.rad-logo{
opacity:0;
}
&+.rad-logo-hidden{
opacity:1;
visibility:visible;
}
}
.rad-sidebar.rad-nav-min{
width:45px !important;
.rad-sidebar-item{
opacity:0;
visibility:hidden;
-webkit-transition:all .1s linear;
transform:translate3d(-200px,0,0);
}
.icon-bg{
transform:translate3d(0,0,0);
}
i{
border:0px;
color:white;
transition:all .2s linear;
}
li:hover{
.icon-bg{
transform:scale(1.2,1);
}
}
}
.rad-body-wrapper{
position:absolute;
left:230px;
top:75px;
width:auto;
right:0;
transition: all .2s ease-in-out;
}
.rad-body-wrapper.rad-nav-min{
left:50px;
}
.rad-collapse {
height:0px;
padding: 0;
opacity:0;
overflow: hidden;
}
@-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
100% {
-webkit-transform: perspective(400px);
}
}
@media screen and (max-width: 450px){
.rad-info-box i{
opacity:.3;
}
.flat-theme{
.rad-toggle-btn{
right:20px !important;
}
.rad-top-nav-container{
.links:last-child{
display:none;
}
}
}
}
@media screen and (min-width: 850px){
.rad-logo-container{
height:75px;
.rad-logo{
line-height:75px;
}
.rad-toggle-btn{
line-height:75px;
height:auto;
}
}
.rad-top-nav-container{
padding:10px;
}
.rad-sidebar{
top:75px;
}
.rad-body-wrapper{
top:100px;
}
.flat-theme{
.rad-toggle-btn{
top:20px !important;
}
}
}
@media screen and (max-width: 850px){
.flat-theme{
.rad-menu-badge{
top:-3px;
}
.rad-toggle-btn{
right:20px !important;
}
.rad-body-wrapper{
top:125px !important;
}
.rad-sidebar{
position: absolute;
}
.rad-navigation{
position:absolute;
.links > li:first-child {
margin-left:15px !important;
}
}
&.sticky{
.brand-icon{
display:inline-block;
}
.rad-logo-container {
z-index:10000;
.rad-toggle-btn{
color: #89949B!important;
position: fixed;
right: 120px !important;
background: #f6f6f6;
top: 11px;
&:hover{
background: crimson;
color:#fff !important;
}
}
}
.rad-navigation{
height:50px;
}
.rad-sidebar{
top:50px;
position:fixed;
//transition: none;
}
.rad-top-nav-container{
background:#FFF important;
box-shadow:0 0px 9px 4px rgba(#000, .1), 0 -5px 2px 2px rgba(#000, .1);
position:fixed;
left:0;
top:0;
width:100%;
z-index:1000;
}
.links{
margin-left:50px;
}
.brand-icon{
margin-left: 0px;
&:hover{
color:#fff;
}
}
}
}
.rad-navigation{
height:100px;
}
.rad-logo-container.rad-nav-min{
transform:translate3d(0,0,0);
background:transparent;
.rad-logo{
opacity:1;
}
&+.rad-logo-hidden{
display: none;
}
}
.rad-logo-container{
display:block;
float:none;
width:100%;
border-bottom:1px solid #F2F2F2;
}
.rad-top-nav-container{
display:block;
float:none;
height:50px;
background: $base-color;
.links>li>a{
font-size:12px;
}
}
.rad-menu-badge{
font-size:10px;
min-width:15px;
min-height:15px;
line-height:15px;
}
.rad-sidebar{
top:100px;
}
.rad-sidebar.rad-nav-min{
transform:translate3d(-200px,0,0);
}
.rad-body-wrapper{
top:125px;
position:relative;
}
.rad-body-wrapper.rad-nav-min{
left:0px;
}
}
//---------------------------------------------------------
//Bootstrap Override
//---------------------------------------------------------
.panel{
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
border-radius:0 !important;
position:relative;
-webkit-transition:all .2s linear;
}
.panel-close{
transform:scale3d(0,0,0);
}
.panel-body{
position:relative;
-webkit-transition:all .2s linear;
}
.panel-heading{
background: $base-color !important;
border-radius:0;
padding:15px;
border-bottom:0 !important;
}
.panel-heading .panel-title{
text-transform:uppercase;
font-weight:600;
font-size:$font-size;
color:$text-color;
}
.overlay{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:1001;
background: rgba(255,255,255,0.75);
text-align:center;
&:before{
content:"";
height:100%;
vertical-align: middle;
width:1px;
display:inline-block;
margin-left:-5px;
}
.overlay-content{
display:inline-block;
vertical-align:middle;
}
i{
display:block;
position:inline-block;
vertical-align:middle;
color:black;
}
}
.rad-panel-action {
list-style: none;
display: inline-block;
float: right;
}
.rad-panel-action li {
display: inline-block;
color: $text-color;
margin: 0 5px;
cursor: pointer;
}
.rad-info-box{
margin-bottom:16px;
box-shadow:1px 1px 2px 0 #CCCCCC;
padding:20px;
box-shadow:0 2px 5px 0 rgba(0,0,0,.26);
background:$base-color !important;
}
.rad-info-box i{
display:block;
background-clip:padding-box;
margin-right:15px;
height:60px;
width:60px;
border-radius:100%;
line-height:60px;
text-align:center;
font-size:4.4em;
position:absolute;
}
.rad-info-box .value,
.rad-info-box .heading{
display:block;
position:relative;
color: $text-color;
text-align:right;
z-index:10;
}
.rad-info-box .heading{
font-size:1.2em;
font-weight:300;
text-transform:uppercase;
}
.rad-info-box .value{
font-size:2.1em;
font-weight:600;
margin-top:5px;
}
.rad-list-group-item{
margin:5px 10px 25px 5px;
&:after{
content:"";
display:table;
}
}
.rad-chat{
border:1px solid rgba(#c6c6c6,.5);
padding:0 10px;
border-radius:2px;
position:relative;
}
.rad-chat-body{
position:relative;
}
.rad-list-group-item.left{
.rad-chat{
margin-left:50px;
.sm-text{
float:right;
}
&:after{
content:"";
border-top:1px solid rgba(#c6c6c6,.5);
border-left:1px solid rgba(#c6c6c6,.5);
height:10px;
width:10px;
background:$base-color;
position:absolute;
left:-6px;
top:10px;
transform:rotate(-45deg);
}
}
}
.rad-chat-msg {
font-size:14px;
color:#585f69;
}
.rad-list-group-item.right{
.rad-chat{
margin-right:50px;
.lg-text{
float:right;
}
&:after{
content:"";
border-top:1px solid rgba(#c6c6c6,.5);
border-right:1px solid rgba(#c6c6c6,.5);
height:10px;
width:10px;
background:$base-color;
position:absolute;
right:-6px;
top:10px;
transform:rotate(45deg);
}
}
}
.rad-list-icon{
position:relative;
height:40px;
width:40px;
border-radius:100%;
line-height:40px;
text-align:center;
color: white;
top:-5px;
}
.icon-shadow{
box-shadow: 0 0px 3px 1px rgba(0,0,0,.26);
}
.rad-list-img{
border-radius:100%;
width:32px;
height:32px;
}
.rad-list-group{
position:relative;
}
.rad-list-group.group{
&:before{
content:"";
position:absolute;
background:rgba(#c6c6c6,.3);
top:-20px;
bottom:-20px;
left:25px;
width:1px;
}
}
.rad-list-content{
line-height:1.3;
margin-left:50px;
}
.rad-timeline {
padding: 10px 0;
position: relative;
&:before {
content: "";
position: absolute;
border: 1px solid #c6c6c6;
left: 50%;
top: 0;
height: 100%;
bottom: 1px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}
.rad-timeline-item {
list-style: none;
padding: 10px;
position: relative;
vertical-align: middle;
margin-bottom: 20px;
font-size: 14px;
.rad-timeline-badge {
position: absolute;
left: 50%;
top: 0;
margin-left: -15px;
color: #FFF;
width: 30px;
height: 30px;
font-size: 12px;
border-radius: 100%;
text-align: center;
line-height: 25px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: all .2s easein-out;
border: 2px solid #fff;
span {
transition: all 200ms linear;
transform: scale(0);
opacity: 0;
position: absolute;
color: #e6e6e6;
background: Grey;
min-width: 70px;
border-radius: 3px;
&.pull-right {
right: 35px;
}
&.pull-left {
left: 35px;
}
}
&:hover span {
opacity: 1;
transform: scale(1);
}
}
.rad-timeline-panel {
position: relative;
width: 40%;
background: #FFF;
padding: 15px;
//box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
top: -20px;
margin-left: 10px;
border-radius: 6px;
border:1px solid rgba(0, 0, 0, 0.2);
&:after {
content: "";
width: 15px;
height: 15px;
background: #FFF;
position: absolute;
top: 30px;
right: -8.5px;
margin-top: -10px;
transform: rotate(135deg);
border-top: 1px solid rgba(0, 0, 0, 0.2);
border-left: 1px solid rgba(0, 0, 0, 0.2);
}
}
&:before {
content: "";
display: table;
}
&:after {
content: "";
clear: both;
display: block;
overflow: hidden;
}
&:first-child {
margin-top: 20px;
}
.pull-right.rad-timeline-panel {
background: #e6e6e6;
margin-right: 10px;
&:after {
content: "";
left: -8.5px;
transform: rotate(-45deg);
background: #e6e6e6;
}
}
}
}
.rad-timeline-footer {
p {
display: inline-block;
font-weight: 600;
color: #515d6e;
i {
font-size: 24px;
color: crimson;
}
}
}
//**********************
// override fa
//**********************
.fa-spin{
-webkit-animation: fa-spin .5s infinite linear;
animation: fa-spin .5s infinite linear;
}
.brand-icon{
font-size:22px;
height: 50px;
display: inline-block;
float: left;
width: 50px;
background-color: crimson;
text-align: center;
line-height: 50px;
color: white;
font-weight: 700;
transition: all .2s linear;
margin-left: -230px;
display:none;
}
.flat-theme{
body{
background: #f1f2f7;
}
.rad-navigation{
text-align: left;
.rad-top-nav-container{
float: none !important;
.links:last-child{
float:none !important;
& > li{
& > ul.rad-dropmenu-item{
left:0;
&:before{
left:8px;
right:100%;
}
}
}
& > li:first-child{
margin-left:30px;
}
}
.links > li{
text-align: center;
& >a{
border-radius: 50%;
width: 32px;
height: 32px;
background: #f6f6f6;
display:inline-block;
line-height:32px;
}
&:hover{
>a{
color:white !important;
}
}
}
}
}
.rad-logo-container.rad-nav-min{
transform: none;
.rad-logo{
opacity:1;
}
& + .rad-logo-hidden{
opacity:0;
}
}
.rad-logo-container{
//background: crimson !important;
position:relative;
z-index:1000;
.rad-toggle-btn{
font-size:14px;
width:30px;
height:30px;
display:inline-block;
position:absolute;
line-height:30px;
text-align:center;
padding:0;
border-radius:50%;
right:-15px;
background: #f6f6f6;
top:7.5px;
transition: all .2s linear;
}
}
.rad-sidebar{
background: #32323a !important;
box-shadow:none;
li{
border-bottom:1px solid rgba(255,255,255,.05);
&:hover{
background: #28282a !important;
}
& a {
i{
color: white;
}
>span{
color: #aeb2b7 !important;
-webkit-transition: none;
}
}
}
}
.rad-info-box{
box-shadow: none !important;
border-radius:4px;
}
.panel{
box-shadow: none !important;
border-radius: 4px !important;
border:none !important;
.panel-heading{
background: #fafafa !important;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.panel-body{
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
.panel-default{
border-color: none;
}
.nvtooltip {
position: absolute;
background-color: rgba(255, 255, 255, 1);
padding: 1px;
border: 1px solid rgba(0, 0, 0, .2);
z-index: 10000;
font-family: 'Roboto Condensed', "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-size: 13px;
text-align: left;
pointer-events: none;
white-space: nowrap;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius:4px;
min-width:100px;
}
.nvtooltip h3 {
font-size: 13px;
margin: 0;
padding: 2px 4px;
line-height: 18px;
font-weight: bold;
text-transform:uppercase;
background-color: rgba(247, 247, 247, .75);
text-align: center;
border-bottom: 1px solid #ebebeb;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0
}
.nvtooltip p {
margin: 0;
font-size: 12px;
padding: 2px;
text-align: center
}
.nvtooltip span {
display: inline-block;
margin: 2px 0
}
}
@each $key, $value in (crimson: crimson, teal: #1fb5ad, orange: #ff503f, purple: rebeccapurple, twitter: #55acee){
.rad-bg-#{$key}{
background: $value;
}
.flat-theme.#{$key}{
.rad-toggle-btn,
.rad-logo{
color:white;
}
.rad-logo-container{
background: $value !important;
}
.rad-page-title .btn{
background: darken($value,10) !important;
color:white;
border-radius:4px !important;
box-shadow:none;
}
.rad-toggle-btn{
background: darken($value,10) !important;
&:hover{
background: lighten($value,10) !important;
}
}
.rad-dropmenu-footer,
.rad-dropmenu-header{
background: darken($value,10) !important;
}
.links{
& > li:not(.no-color){
&:hover{
>a{
background: lighten($value,5) !important;
}
}
}
}
.rad-dropmenu-item{
border-color: darken($value,10) !important;
&:before{
border-color: darken($value,10) transparent;
}
}
.rad-sidebar{
li:hover a>span{
color: $value !important;
}
}
&.sticky {
@media screen and (max-width: 850px){
.rad-toggle-btn{
background: #fafafa !important;
color:#89949B !important;
}
}
.brand-icon,
.rad-toggle-btn:hover{
background: $value !important;
color: #fff !important;
}
}
}
}
.rad-grid,
.rad-chart {
position:absolute;
top:20px;
left:0;
right:0;
bottom:0;
}
.chart-wrapper{
height:400px;
overflow:hidden;
}
svg{
display: block;
width: 100%;
height: 100%;
}
rad-panel{
.panel {
box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.05), 0 2px 5px rgba(0, 0, 0, 0.3) !important;
border-radius: 0 !important;
position: relative;
height: 100%;
-webkit-transition: all .2s linear;
}
.panel-body {
position: absolute;
left:15px;
right:15px;
top:34px;
bottom:15px;
-webkit-transition: all .2s linear;
}
}
.modal-content {
margin-top:130px;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css" rel="stylesheet" />
<link href="https://rawgit.com/ManifestWebDesign/angular-gridster/master/dist/angular-gridster.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment