<html>
<head>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link data-require="angular.js@1.5.3" data-semver="1.5.3" rel="stylesheet" href="Bootstrap" />
<script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="app.js"></script>
<script src="slideController.js"></script>
</head>
<body>
<div data-ng-controller="AppController">
<div ng-app="angularSlideables">
<a href="#" class="btn btn-danger" slide-toggle="#derp" id="opener"><i class="glyphicon glyphicon-align-justify"></i></a>
<slideable id="derp" class="slideable"></slideable>
<!-- <div id="derp" class="slideable">
</div> -->
<div class="row nonslideable">
<div class="col-md-3">Next
<div class="widget wblue">
<div ht-widget-header title="Plant Management" allow-collapse="true">Inside Next</div>
</div>
</div>
<div class="col-md-3">Next 1
<div class="widget wblue">
<div ht-widget-header title="Plant Management" allow-collapse="true">Inside Next 1</div>
</div>
</div>
<div class="col-md-3">Next 2
<div class="widget wblue">
<div ht-widget-header title="Plant Management" allow-collapse="true">Inside Next 2</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
var Demo = angular.module("angularSlideables", []);
// root-level controller for the application.
Demo.controller("AppController", function ($scope, $route, $routeParams) {
// I toggle the value of isVisible.
$scope.toggle = function () {
$scope.isVisible = !$scope.isVisible;
};
// Default the blocks to be visible.
$scope.isVisible = true;
});
// Demo
// .directive('slideable', function () {
// return {
// restrict:'C',
// compile: function (element, attr) {
// // wrap tag
// var contents = element.html();
// element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');
// return function postLink(scope, element, attrs) {
// // default properties
// attrs.duration = (!attrs.duration) ? '500ms' : attrs.duration;
// attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
// element.css({
// 'overflow': 'hidden',
// //'height': '0px',
// 'width' : '0px',
// // 'transitionProperty': 'height',
// 'transitionProperty': 'width',
// 'transitionDuration': attrs.duration,
// 'transitionTimingFunction': attrs.easing
// });
// };
// }
// };
// })
// .directive('slideToggle', function() {
// return {
// restrict: 'A',
// link: function(scope, element, attrs) {
// var target = document.querySelector(attrs.slideToggle);
// attrs.expanded = false;
// element.bind('click', function() {
// var content = target.querySelector('.slideable_content');
// if(!attrs.expanded) {
// content.style.border = '1px solid rgba(0,0,0,0)';
// var y = content.clientHeight;
// var x = content.clientWidth;
// content.style.border = 0;
// target.style.height = y + 'px';
// // target.style.width = x + 'px'
// target.style.width = '600px';
// } else {
// // target.style.height = '0px';
// target.style.width = '0px';
// }
// attrs.expanded = !attrs.expanded;
// });
// }
// }
// });
html, body{
min-height: 100%;
}
body{
position: relative;
}
.slideable {
/* border: 1px solid #333333 ;
float: right ;
height: 0px ;
width : 0px;
line-height: 100px ;
margin-right: 10px ;
overflow: hidden ;
text-align: center ;
width: 200px ;
margin-top:50px;
position: absolute;
top: 0;
right: 0;
width: 100%;
z-index: 1; */
z-index: 999999;
position: fixed;
top: -1px;
bottom: -1px;
padding:0px;
width: auto;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.widget {
margin-top: 10px;
margin-bottom: 20px;
background: #fff;
}
#opener {
float:left;
position: absolute;
top: 0;
right: 0;
z-index: 2;
margin-top:25px;
}
#derp {
float:left;
position: absolute;
top: 0;
right: 0;
z-index: 2;
margin-top:55px;
}
.nonslideable {
z-index: -1;
}
/* taken from ours below this*/
@color_lightblue: #52b9e9;
@color_gm_blue: #1b75bc;
@color_success: #43c83c;
@color_warning: #f88529;
@color_important: #fa3031;
@color_violet: #932ab6;
@color_primary_blue: #2A99CA;
@color_primary_black: #0000000;
@color_primary_white: #ffffff;
@color_primary_grey: #373737;
@color_secondary_grey2: #878989;
@color_select_row: #a8afaf;
@color_secondary_grey3: #c9c9c9c;
@color_secondary_red: #fe0101;
@color_secondary_blue: #27aae1;
@color_top_nav: @color_gm_blue;
@color_bottom_nav: @color_gm_blue;
@color_nav_bar: #F3F3F3;
@color_side_nav: @color_primary_grey;
@color_draggable_item: #e6e6e6;
@color_search_white: #eee;
@import "angularMulti.less";
@import "myKendo.less";
@import "ui-grid.less";
/*@import "smart-table.less";*/
/*@import "buttons.less";*/
* {
/*-webkit-box-shadow: none !important;
-ms-box-shadow: none !important;
box-shadow: none !important;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false) !important;
-webkit-text-shadow: none !important;
-ms-text-shadow: none !important;
text-shadow: none !important;*/
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
/*font-weight: 400;*/
}
html {
position: relative;
min-height: 100%;
}
body {
font-size: 16px !important;
line-height: 23px;
color: #666;
background: #111;
padding-top: 45px;
-webkit-font-smoothing: antialiased;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
margin-bottom: 60px;
}
body .container {
width: 97%;
padding-left: 1.5%;
padding-right: 1.5%;
}
.fixed-panel {
min-height: 495px;
max-height: 495px;
overflow-y: scroll;
}
.fixed-panel-rel {
min-height: 100%;
max-height: 33.5rem;
overflow-y: scroll;
}
.ats-switch {
border-radius: 0px;
min-width: 0.75em;
}
.multiSelect > button {
color: @color_primary_white;
background-color: @color_select_row;
background-image: linear-gradient(#A8AFAF, #A8AFAF);
border-radius: 0px;
}
.multiSelect .checkboxLayer {
border-radius: 0px;
}
.multiSelect > button:hover {
background-image: linear-gradient(#c3caca, #c3caca);
}
.multiSelect > button:disabled {
background-image: linear-gradient(#fff, #fff);
border: 1px solid #ddd;
color: #999;
}
.multiSelect .helperButton {
border: 1px solid #ccc;
color: @color_primary_white;
background-color: @color_select_row;
border-radius: 0px;
}
.multiSelect .clearButton {
border-radius: 0px;
}
.multiSelect .inputFilter {
border-radius: 0px;
}
div.trigger-filter {
margin-top: .50rem;
}
span.fa-color-black {color: black;}
span.fa-color-red {color: red;}
span.fa-color-green {color: green;}
.st-selected {
background: @color_select_row !important;
color: @color_primary_white !important;
}
.panel {
.panel-heading,
.panel-title {
color: @color_search_white;
background-color: @color_gm_blue;
font-size: 1.75rem;
text-align: left;
}
&-default {
.panel-heading,
.panel-title,
.panel-footer {
color: @color_search_white;
background-color: @color_gm_blue;
font-size: 1.75rem;
text-align: left;
}
}
}
span.mixed-case {
display: block;
}
div.search-item {
text-align: center;
margin-top: 1.15rem;
}
div.row-margin {
margin-top: 1.5rem;
}
span.button-line {
font-size: 1.25rem;
margin: 0 2.25rem 5.25rem 0;
}
.panel-group .panel {
border-radius: 0;
}
.panel-primary > .panel-heading {
background-color: @color_gm_blue;
border-color: @color_gm_blue;
}
.panel-heading {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.col-xs-17,
.col-sm-17,
.col-md-17,
.col-lg-17 {
position: relative;
min-height: 1px;
padding-right: 5px;
padding-left: 10px;
}
.col-xs-18,
.col-sm-18,
.col-md-18,
.col-lg-18 {
position: relative;
min-height: 1px;
padding-right: 5px;
padding-left: 10px;
}
.col-xs-17 {
width: 14.28571428571429%;
float: left;
}
.col-xs-18 {
width: 12.285714%;
float: left;
}
@media (min-width: 768px) {
.col-sm-17 {
width: 14.28571428571429%;
float: left;
}
.col-xs-18 {
width: 12.285714%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-17 {
width: 14.28571428571429%;
float: left;
}
.col-xs-18 {
width: 12.285714%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-17 {
width: 14.28571428571429%;
float: left;
}
.col-xs-18 {
width: 12.285714%;
float: left;
}
}
/* Specify styling for tooltip contents */
.tooltip.customClass .tooltip-inner {
color: #e6e6e6;
background-color: #030303;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
/* Hide arrow */
.tooltip.customClass .tooltip-arrow {
display: none;
}
.flexContainer {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
height: 100%;
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
.btn.btn-success {
color: @color_primary_white;
background-color: #5CB85C;
background-image: linear-gradient(to bottom, #5CB85C, #419641);
border-color: #3E8F3E #3E8F3E #3E8F3E;
}
.btn.btn-success:hover {
color: @color_primary_white;
background-color: #419641;
background-image: linear-gradient(to bottom, #419641, #419641);
border-color: #3E8F3E #3E8F3E #3E8F3E;
}
.btn-secondary {
background-color: @color_secondary_blue;
color: #ffffff;
}
uib-tabset .tabBottom {
margin-bottom: 20px;
height: inherit;
min-height: 300px;
}
.ep-form-control(@width: 50%, @max-width: 30em) {
width: @width;
max-width: @max-width;
}
.ep-form-control-50 {
.ep-form-control(50%, 30em);
}
.ep-form-control-75 {
.ep-form-control(75%, 30em);
}
.ep-form-control-100 {
.ep-form-control(100%, 30em);
}
.form-control-inline(@width: 50%) {
width: @width !important;
}
input.form-control-inline-100,
textarea.form-control-inline-100 {
.form-control-inline(100%);
}
input.form-control-inline-50,
textarea.form-control-inline-50 {
.form-control-inline(50%);
}
.list {
list-style: none outside none;
margin: 10px 0 30px;
}
.list-input {
min-width: 200px;
box-sizing: border-box;
}
.angular-ui-tree-handle {
background: #f8faff;
border: 1px solid #dae2ea;
color: #7c9eb2;
padding: 10px 10px;
}
.angular-ui-tree-handle:hover {
color: #438eb9;
background: #f4f6f7;
border-color: #dce2e8;
}
.angular-ui-tree-placeholder {
background: #f0f9ff;
border: 2px dashed #bed2db;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
tr.angular-ui-tree-empty {
height: 100px;
}
.group-title {
background-color: #687074 !important;
color: #FFF !important;
}
/* --- Tree --- */
.tree-node {
border: 0px solid #dae2ea;
background: @color_primary_white;
color: @color_gm_blue;
}
.nodrop {
background-color: @color_draggable_item;
}
.tree-node-content {
margin: 1.5rem;
}
.tree-handle {
padding: 0.10rem;
background: @color_primary_white;
color: @color_gm_blue;
margin-right: 0.25rem;
}
.nodeActive {
background: #deeaf9;
}
.nodeActive:hover {
background: #428bca;
color: #FEFEFA;
}
item {
width: 200px;
padding: 5px 10px;
margin: 5px 0;
border: 2px solid #444;
border-radius: 5px;
background-color: #EA8A8A;
font-size: 1.1em;
font-weight: bold;
text-align: center;
cursor: move;
}
.modal-backdrop.am-fade {
opacity: .5;
transition: opacity .15s linear;
&.ng-enter {
opacity: 0;
&.ng-enter-active {
opacity: .5;
}
}
&.ng-leave {
opacity: .5;
&.ng-leave-active {
opacity: 0;
}
}
}
/* custom buttons Credit: http://charliepark.org/bootstrap_buttons/ */
.btn-kilo {
background-color: hsl(0, 0%, 79%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#134134134", endColorstr="#c9c9c9");
background-image: -khtml-gradient(linear, left top, left bottom, from(#134134134), to(#c9c9c9));
background-image: -moz-linear-gradient(top, #134134134, #c9c9c9);
background-image: -ms-linear-gradient(top, #134134134, #c9c9c9);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #134134134), color-stop(100%, #c9c9c9));
background-image: -webkit-linear-gradient(top, #134134134, #c9c9c9);
background-image: -o-linear-gradient(top, #134134134, #c9c9c9);
background-image: linear-gradient(#134134134, #c9c9c9);
border-color: #c9c9c9 #c9c9c9 hsl(0, 0%, 68.5%);
color: #333 !important;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.69);
-webkit-font-smoothing: antialiased;
}
btn-hotel {
background-color: hsl(0, 0%, 16%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5b5b5b", endColorstr="#282828");
background-image: -khtml-gradient(linear, left top, left bottom, from(#5b5b5b), to(#282828));
background-image: -moz-linear-gradient(top, #5b5b5b, #282828);
background-image: -ms-linear-gradient(top, #5b5b5b, #282828);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5b5b5b), color-stop(100%, #282828));
background-image: -webkit-linear-gradient(top, #5b5b5b, #282828);
background-image: -o-linear-gradient(top, #5b5b5b, #282828);
background-image: linear-gradient(#5b5b5b, #282828);
border-color: #282828 #282828 hsl(0, 0%, 11%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
-webkit-font-smoothing: antialiased;
}
btn-oscar {
background-color: hsl(70, 11%, 23%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7b7f66", endColorstr="#3e4134");
background-image: -khtml-gradient(linear, left top, left bottom, from(#7b7f66), to(#3e4134));
background-image: -moz-linear-gradient(top, #7b7f66, #3e4134);
background-image: -ms-linear-gradient(top, #7b7f66, #3e4134);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7b7f66), color-stop(100%, #3e4134));
background-image: -webkit-linear-gradient(top, #7b7f66, #3e4134);
background-image: -o-linear-gradient(top, #7b7f66, #3e4134);
background-image: linear-gradient(#7b7f66, #3e4134);
border-color: #3e4134 #3e4134 hsl(70, 11%, 17.5%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.36);
-webkit-font-smoothing: antialiased;
}
.btn-echo {
background-color: hsl(110, 56%, 16%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#398f28", endColorstr="#193f11");
background-image: -khtml-gradient(linear, left top, left bottom, from(#398f28), to(#193f11));
background-image: -moz-linear-gradient(top, #398f28, #193f11);
background-image: -ms-linear-gradient(top, #398f28, #193f11);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #398f28), color-stop(100%, #193f11));
background-image: -webkit-linear-gradient(top, #398f28, #193f11);
background-image: -o-linear-gradient(top, #398f28, #193f11);
background-image: linear-gradient(#398f28, #193f11);
border-color: #193f11 #193f11 hsl(110, 56%, 11%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
-webkit-font-smoothing: antialiased;
}
.btn-india {
background-color: hsl(214, 37%, 28%) !important;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7a99c1", endColorstr="#2c4361");
background-image: -khtml-gradient(linear, left top, left bottom, from(#7a99c1), to(#2c4361));
background-image: -moz-linear-gradient(top, #7a99c1, #2c4361);
background-image: -ms-linear-gradient(top, #7a99c1, #2c4361);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7a99c1), color-stop(100%, #2c4361));
background-image: -webkit-linear-gradient(top, #7a99c1, #2c4361);
background-image: -o-linear-gradient(top, #7a99c1, #2c4361);
background-image: linear-gradient(#7a99c1, #2c4361);
border-color: #2c4361 #2c4361 hsl(214, 37%, 19.5%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.56);
-webkit-font-smoothing: antialiased;
}
/**
* For the correct positioning of the placeholder element, the dnd-list and
* it's children must have position: relative
*/
.templatesType ul[dnd-list],
.templatesType ul[dnd-list] > li {
position: relative;
}
/**
* The dnd-list should always have a min-height,
* otherwise you can't drop to it once it's empty
*/
.templatesType ul[dnd-list] {
min-height: 42px;
padding-left: 0px;
}
/**
* The dndDraggingSource class will be applied to
* the source element of a drag operation. It makes
* sense to hide it to give the user the feeling
* that he's actually moving it.
*/
.templatesType ul[dnd-list] .dndDraggingSource {
display: none;
}
/**
* An element with .dndPlaceholder class will be
* added to the dnd-list while the user is dragging
* over it.
*/
.templatesType ul[dnd-list] .dndPlaceholder {
display: block;
background-color: #ddd;
padding: 10px 15px;
min-height: 42px;
}
/**
* The dnd-lists's child elements currently MUST have
* position: relative. Otherwise we can not determine
* whether the mouse pointer is in the upper or lower
* half of the element we are dragging over. In other
* browsers we can use event.offsetY for this.
*/
.templatesType ul[dnd-list] li {
background-color: #fff;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
margin-bottom: -1px;
/* Disable text selection if item is not draggable */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.templatesType ul[dnd-list] li dnd-nodrag {
display: block;
padding: 10px 15px;
}
.background-Footprint {
background-color: #CAE0FC !important;
}
.templatesType ul[dnd-list] li.background-TT {
background-color: #CAE0FC;
}
.templatesType ul[dnd-list] li.background-PP {
background-color: #dce2eb;
}
.templatesType ul[dnd-list] li.background-BC {
background-color: #82bb87;
}
.templatesType ul[dnd-list] li.background-GE {
background-color: #abc5a9;
}
.templatesType ul[dnd-list] li.background-CU {
background-color: #1516d4;
}
.templatesType ul[dnd-list] li.background-VI {
background-color: #d43f15;
}
/**
* Handle positioning
*/
.templatesType .handle {
cursor: move;
position: absolute;
top: 40%;
}
.templatesType .handle-left {
cursor: move;
position: absolute;
top: 80%;
}
.templatesType .name {
margin-left: 20px;
}
/***************************** Required styles *****************************/
/**
* For the correct positioning of the placeholder element, the dnd-list and
* it's children must have position: relative
*/
.templatesSmallType ul[dnd-list],
.templatesSmallType ul[dnd-list] > li {
position: relative;
}
/***************************** Dropzone Styling *****************************/
/**
* The dnd-list should always have a min-height,
* otherwise you can't drop to it once it's empty
*/
.templatesSmallType .dropzone ul[dnd-list] {
min-height: 42px;
margin: 0px;
padding-left: 0px;
}
/**
* The dnd-lists's child elements currently MUST have
* position: relative. Otherwise we can not determine
* whether the mouse pointer is in the upper or lower
* half of the element we are dragging over. In other
* browsers we can use event.offsetY for this.
*/
.templatesSmallType .dropzone li {
display: block;
}
/**
* Reduce opacity of elements during the drag operation. This allows the user
* to see where he is dropping his element, even if the element is huge. The
* .dndDragging class is automatically set during the drag operation.
*/
.templatesSmallType .dropzone .dndDragging {
opacity: 0.7;
}
/**
* The dndDraggingSource class will be applied to the source element of a drag
* operation. It makes sense to hide it to give the user the feeling that he's
* actually moving it. Note that the source element has also .dndDragging class.
*/
.templatesSmallType .dropzone .dndDraggingSource {
display: none;
}
/**
* An element with .dndPlaceholder class will be added as child of the dnd-list
* while the user is dragging over it.
*/
.templatesSmallType .dropzone .dndPlaceholder {
background-color: #ddd !important;
min-height: 42px;
display: block;
position: relative;
}
/***************************** Element type specific styles *****************************/
.templatesSmallType .dropzone .itemlist {
min-height: 120px !important;
}
.templatesSmallType .dropzone .itemlist > li {
background-color: #337ab7;
border: none;
border-radius: .25em;
color: #fff;
float: left;
font-weight: 700;
height: 50px;
margin: 5px;
padding: 3px;
text-align: center;
width: 50px;
}
.templatesSmallType .dropzone .container-element {
margin: 10px;
}
/*toggle-switch*/
.toggle-switch {
border: 1px solid;
cursor: pointer;
display: inline-block;
text-align: left;
overflow: hidden;
line-height: 8px;
min-width: 100px;
}
.toggle-switch.disabled > div > span.knob {
background: #AAA;
}
.toggle-switch span {
cursor: pointer;
display: inline-block;
float: left;
height: 100%;
line-height: 20px;
padding: 4px;
text-align: center;
width: 33%;
white-space: nowrap;
box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.toggle-switch > div {
position: relative;
width: 150%;
}
.toggle-switch .knob {
background: red;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
background-color: #f5f5f5;
width: 34%;
z-index: 100;
}
.toggle-switch .switch-on {
left: 0%;
}
.toggle-switch .switch-off {
left: -50%;
}
.toggle-switch .switch-left, .toggle-switch .switch-right {
z-index: 1;
}
.toggle-switch .switch-left {
color: #fff;
background: #005fcc;
}
.toggle-switch .switch-right {
color: #333;
background: #f0f0f0;
}
.toggle-switch-animate {
transition: left 0.5s;
-o-transition: left 0.5s;
-moz-transition: left 0.5s;
-webkit-transition: left 0.5s;
}
.toggle-switch {
display: inline-block;
cursor: pointer;
border-radius: 4px;
border: 1px solid;
border-color: #cccccc;
position: relative;
text-align: left;
overflow: hidden;
line-height: 8px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
min-width: 100px;
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.toggle-switch .knob {
color: #333333;
background: #ffffff;
border: 3px;
}
.toggle-switch .switch-left {
color: #fff;
background: #428bca;
}
.toggle-switch .switch-right {
color: #000;
background: #eeeeee;
}
/*toggle-switch*/
.apps-container {
/*border: 2px solid @color_gm_blue;*/
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
/*margin: 5px 2px 0 0;*/
padding: 5px 5px 5px 5px;
height: inherit;
min-height: 610px; /*585px;*/
max-height: 610px;
overflow-y: auto;
overflow-x: hidden;
}
.apps-container-plant-shop {
/*border: 2px solid @color_gm_blue;*/
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
/*margin: 5px 2px 0 0;*/
padding: 5px 5px 5px 5px;
height: inherit;
min-height: 632px; /*585px;*/
max-height: 632px;
overflow-y: auto;
overflow-x: hidden;
}
.apps-control-container {
border: 2px solid @color_gm_blue;
margin: 0.5% 0.25% 0 0;
padding: 0.5% 0.5% 1.5% 0.5%;
height: inherit;
min-height: 100%;
}
.app {
width: 250px;
padding: 10px 10px 10px 10px;
margin: 5px 5px 5px 5px;
border: 2px solid #444;
border-radius: 5px;
background-color: @color_draggable_item;
font-size: 1.1em;
font-weight: bold;
text-align: center;
cursor: move;
}
.app-extended {
.app;
width: 100%;
}
.task-padding {
padding: 0 0 0 25px;
}
.accordion-remove-border-radius {
border-radius: 0px !important;
}
a.accordion-toggle:hover {
color: #eee;
}
uib-accordion .panel-title {
height: 23px;
}
.accordion-div,
.accordion-div span {
line-height: 15px;
}
.accordion-reduce-padding .panel-body {
padding: 15px 5px 15px 5px !important;
}
.accordion-header {
font-size: 12px;
}
.spindle-mask-panel {
padding: 15px;
}
legend {
font-size: 18px;
}
.floatingList > .item {
float: left;
width: 70px;
}
.logList {
margin-top: 20px;
width: 250px;
min-height: 300px;
padding: 5px 15px;
border: 5px solid #000;
border-radius: 15px;
}
.logItem {
margin-bottom: 10px;
}
.logList:before {
content: 'log';
padding: 0 5px;
position: relative;
top: -1.1em;
background-color: #FFF;
}
.select2 > .select2-choice.ui-select-match {
/* Because of the inclusion of Bootstrap */
height: 29px;
}
.selectize-control > .selectize-dropdown {
top: 36px;
border-radius: 0px;
}
.selectize-input {
border-radius: 0px;
}
/* Some additional styling to demonstrate that append-to-body helps achieve the proper z-index layering. */
.select-box {
background: #fff;
position: relative;
z-index: 1;
}
.alert-info.positioned {
margin-top: 1em;
position: relative;
z-index: 10000; /* The select2 dropdown has a z-index of 9999 */
}
.btn, .badge, .modal, .modal-dialog, .modal-content,
input, select {
-ms-border-radius: 0 !important;
border-radius: 0 !important;
}
textarea {
resize: none;
}
.operation-zone {
margin-right: 0px !important;
/*border: 1px solid transparent;*/
}
.operation-zone-left {
/*border: 1px solid transparent;*/
}
.operation-zone-right {
/*border: 1px solid transparent;*/
}
/**
* For the correct positioning of the placeholder element, the dnd-list and
* it's children must have position: relative
*/
.multiDemo ul[dnd-list],
.multiDemo ul[dnd-list] > li {
position: relative;
}
/**
* The dnd-list should always have a min-height,
* otherwise you can't drop into it once it's empty
*/
.multiDemo ul[dnd-list] {
min-height: 42px;
padding-left: 0px;
}
/**
* An element with .dndPlaceholder class will be
* added to the dnd-list while the user is dragging
* over it.
*/
.multiDemo ul[dnd-list] .dndPlaceholder {
display: block;
background-color: #ddd;
min-height: 42px;
}
/**
* The dnd-lists's child elements currently MUST have
* position: relative. Otherwise we can not determine
* whether the mouse pointer is in the upper or lower
* half of the element we are dragging over. In other
* browsers we can use event.offsetY for this.
*/
.multiDemo ul[dnd-list] li {
background-color: #fff;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
list-style-type: none;
}
/**
* Show selected elements in green
*/
.multiDemo ul[dnd-list] li.selected {
background-color: #dff0d8;
color: #3c763d;
}
input, select {
padding: 4px !important;
/*width: 65% !important;*/
display: inline-block !important;
}
div.treeFormat {
font-size: 16px;
height: inherit;
/*min-height: 625px;*/
background-color: @color_primary_white !important;
/*padding: 15px 5px 5px 5px;*/
border: none;
}
div.treeFormat ul {
background-color: @color_primary_white;
}
.navbar * {
background-image: none !important;
-webkit-text-shadow: none !important;
-ms-text-shadow: none !important;
text-shadow: none !important;
}
form * {
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}
input, textarea {
background-image: none !important;
border: 1px solid #ccc !important;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}
select {
font-size: 13px !important;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}
input[type="radio"], input[type="checkbox"] {
margin: 0 0 0 !important;
margin-right: 5px !important;
line-height: 23px !important;
border: 0 !important;
}
.btn {
background-image: none !important;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
font-size: 16px !important;
}
.btn.btn-form-md {
margin: 0 .5em .2em .5em;
width: 9em;
}
.btn.btn-mini {
font-size: 11px !important;
}
h1, h2, h3, h4, h5, h6 {
padding: 2px 0;
margin: 2px 0;
color: #777;
font-weight: 400;
}
h2 {
font-size: 30px;
line-height: 40px;
}
h3 {
font-size: 23px;
line-height: 33px;
}
h4 {
font-size: 20px;
line-height: 30px;
}
h5 {
font-size: 18px;
line-height: 28px;
}
h6 {
font-size: 15px;
line-height: 25px;
}
p {
padding: 1px 0 !important;
margin: 1px 0 !important;
}
a {
color: @color_top_nav;
text-decoration: none !important;
}
a:hover {
color: #888;
text-decoration: none;
}
a:hover, a:focus, a:active {
outline: 0;
}
.bold {
font-weight: 600;
}
hr {
margin: 8px 0 8px 0 !important;
padding: 0 !important;
border-top: 0;
border-bottom: 1px solid #ddd !important;
height: 0;
}
:focus {
outline: none;
}
::-moz-focus-inner {
border: 0;
}
.well {
padding: 10px 15px;
}
a.btn {
font-size: 13px !important;
}
.label {
font-weight: 400;
padding: 3px 6px !important;
font-size: 13px;
}
.control-label {
font-weight: 400 !important;
font-size: 14px;
}
.task-control-label {
padding-top: 0px !important;
line-height: 20px;
width: 190px !important;
}
.control-label-subtext {
font-size: 10px;
line-height: 10px;
}
.task-toggle-switch {
font-size: 1rem;
width: 10rem;
}
.badge {
font-weight: 400;
padding: 3px 8px;
font-size: 13px;
}
.progress {
height: 17px;
line-height: 17px;
margin: 5px 0 !important;
border: 0;
}
.progress .bar {
font-size: 12px;
}
/* Button colors */
.btn.btn-primary {
background: @color_gm_blue !important;
}
.btn.btn-primary.active {
background: @color_success !important;
}
.btn.btn-primary:hover {
background: #0f608b !important;
}
.btn.btn-info {
background: @color_lightblue !important;
}
.btn.btn-info:hover {
background: #459fc9 !important;
}
.btn.btn-success {
background: @color_success !important;
}
.btn.btn-success:hover {
background: #36a530 !important;
}
.btn.btn-warning {
background: @color_warning !important;
}
.btn.btn-warning:hover {
background: #d67323 !important;
}
.btn.btn-danger {
background: @color_important !important;
}
.btn.btn-danger:hover {
background: #d82829 !important;
}
/* Label colors */
.label.label-success,
.badge.badge-success {
background: @color_success !important;
}
.label.label-warning,
.badge.badge-warning {
background: @color_warning !important;
}
.label.label-important,
.badge.badge-important {
background: @color_important !important;
}
.label.label-info,
.badge.badge-info {
background: @color_lightblue !important;
}
/* Background colors */
.blightblue {
background: @color_lightblue !important;
color: #fff !important;
border: 0 !important;
}
.bblue {
background: @color_gm_blue !important;
color: #fff !important;
border: 0 !important;
}
.bgreen {
background: @color_success !important;
color: #fff !important;
border: 0 !important;
}
.borange {
background: @color_warning !important;
color: #fff !important;
border: 0 !important;
}
.bred {
background: @color_important !important;
color: #fff !important;
border: 0 !important;
}
.bviolet {
background: @color_violet !important;
color: #fff !important;
border: 0 !important;
}
.blightblue h2, .blightblue h3, .blightblue h3, .blightblue h4, .blightblue h5, .blightblue h6,
.bblue h2, .bblue h3, .bblue h3, .bblue h4, .bblue h5, .bblue h6,
.bgreen h2, .bgreen h3, .bgreen h3, .bgreen h4, .bgreen h5, .bgreen h6,
.bred h2, .bred h3, .bred h3, .bred h4, .bred h5, .bred h6,
.bviolet h2, .bviolet h3, .bviolet h3, .bviolet h4, .bviolet h5, .bviolet h6,
.borange h2, .borange h3, .borange h3, .borange h4, .borange h5, .borange h6 {
color: #fff !important;
}
.blightblue a,
.bblue a,
.bgreen a,
.bred a,
.borange a,
.bviolet a {
color: #eee !important;
}
.blightblue a:hover,
.bblue a:hover,
.bgreen a:hover,
.bred a:hover,
.borange a:hover,
.bviolet a:hover {
color: #ddd !important;
}
/* Text colors */
.lightblue {
color: @color_lightblue !important;
}
.blue {
color: @color_gm_blue !important;
}
.green {
color: @color_success !important;
}
.orange {
color: @color_warning !important;
}
.red {
color: @color_important !important;
}
.violet {
color: @color_violet !important;
}
/* Modal */
.modal-header {
padding-top: 7px;
padding-bottom: 7px;
background-color: @color_gm_blue;
}
.modal-title {
color: @color_primary_white;
}
/* Form */
form {
margin: 10px;
}
form input, form button, form textarea, form select {
font-size: 13px !important;
}
form label {
font-size: 13px;
line-height: 13px;
}
.form-inline button {
margin-left: 15px;
}
.form-horizontal .control-label {
width: 140px;
}
.form-horizontal .controls {
margin-left: 110px;
}
.form-horizontal .controls:first-child {
*padding-left: 100px;
}
.form-horizontal .form-actions {
padding-left: 110px;
}
.form-actions {
padding: 5px 20px 5px;
background: transparent;
border-top: 0;
}
/* Back to top */
.totop {
position: fixed;
bottom: 0;
left: 0;
z-index: 104400;
background: @color_important;
display: none;
}
.totop a, .totop a:visited {
display: block;
width: 30px;
height: 30px;
color: #fff;
text-align: center;
line-height: 30px;
}
.totop a:hover {
color: #eee;
text-decoration: none;
}
/* Half column - CHECK LATER */
.col-left {
width: 48%;
float: left;
}
.col-right {
width: 48%;
float: right;
}
/* Dropdown menu */
.dropdown-big .dropdown-menu {
-moz-min-width: 250px;
-ms-min-width: 250px;
-o-min-width: 250px;
-webkit-min-width: 250px;
min-width: 250px;
padding: 8px 10px;
background: #fff;
}
.dropdown-big .dropdown-menu p {
margin: 1px 0;
padding: 1px 0;
font-size: 12px;
line-height: 18px;
}
.dropdown-big .dropdown-menu a {
font-size: 13px;
line-height: 23px;
background: transparent;
padding: 0;
color: #444 !important;
display: inline;
}
.dropdown-big .dropdown-menu a:hover {
color: #777 !important;
background: transparent !important;
}
.dropdown-big .dropdown-menu .drop-foot {
text-align: center;
}
.dropdown-big .dropdown-menu .drop-foot a {
font-size: 12px !important;
}
.dropdown-big .dropdown-menu hr {
padding: 0;
margin: 8px 0;
border-top: 0 solid #aaa;
border-bottom: 1px solid #eee;
}
.dropdown-big .dropdown-menu h5 {
color: #666 !important;
line-height: 18px;
font-weight: bold;
font-size: 13px;
}
.dropdown-menu {
background: #fff;
-ms-border-radius: 0;
border-radius: 0;
border: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.dropdown-menu li {
color: #777;
font-size: 13px;
line-height: 18px;
}
.dropdown-menu li > a {
color: #555;
line-height: 23px !important;
}
.dropdown-menu li > a:hover {
background: #f9f9f9 !important;
filter: none;
color: #888;
}
.dropdown-menu a:hover, .dropdown-menu a:focus {
filter: none !important;
background: #fff !important;
}
.dropdown-menu::after, .dropdown-menu::before {
border: none !important;
}
/* Sidebar */
.sidebar {
width: 230px;
float: left;
display: block;
background: #00008b;
color: #eee;
position: relative;
}
.sidebar hr {
border-bottom: 1px solid @color_side_nav !important;
}
.sidebar ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.sidebar ul li {
list-style-type: none;
}
.sidebar .sidebar-inner {
display: block;
width: 100%;
margin: 0 auto;
position: absolute;
z-index: 60;
background: #111;
}
.sidebar .navi li i {
margin-right: 5px;
}
.sidebar .navi li span i {
margin: 0;
}
.sidebar .navi > li > a {
display: block;
padding: 12px 20px;
font-size: 15px;
line-height: 25px;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #222;
background-color: #111;
}
.sidebar .navi > li > a:hover, .sidebar .navi > li.open > a {
border-bottom: 1px solid #222;
background-color: #222;
color: #fff;
}
.sidebar .navi li ul {
display: none;
background: #181818;
}
.sidebar .navi li.open ul {
display: block;
}
.sidebar .navi li ul li a {
display: block;
background: none;
padding: 10px 0;
padding-left: 30px;
text-decoration: none;
color: #999;
border-bottom: 1px solid #222;
}
.sidebar .navi li ul li.active a {
background: #131313;
border-bottom: 1px solid #222;
}
.sidebar .navi li ul li a:hover {
background: #131313;
border-bottom: 1px solid #222;
}
/* Sidebar colors */
.sidebar .navi > li.nlightblue > a:hover,
.sidebar .navi > li.open.nlightblue > a,
.sidebar .navi > li.current.nlightblue > a {
background: @color_lightblue !important;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
transition: background 0.5s ease;
}
.sidebar .navi > li.nblue > a:hover,
.sidebar .navi > li.open.nblue > a,
.sidebar .navi > li.current.nblue > a {
background: @color_gm_blue !important;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
transition: background 0.5s ease;
}
.sidebar .navi > li.ngreen > a:hover,
.sidebar .navi > li.open.ngreen > a,
.sidebar .navi > li.current.ngreen > a {
background: @color_success !important;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
transition: background 0.5s ease;
}
.sidebar .navi > li.norange > a:hover,
.sidebar .navi > li.open.norange > a,
.sidebar .navi > li.current.norange > a {
background: @color_warning !important;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
transition: background 0.5s ease;
}
.sidebar .navi > li.nred > a:hover,
.sidebar .navi > li.open.nred > a,
.sidebar .navi > li.current.nred > a {
background: @color_important !important;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
transition: background 0.5s ease;
}
.sidebar .navi > li.nviolet > a:hover,
.sidebar .navi > li.open.nviolet > a,
.sidebar .navi > li.current.nviolet > a {
background: @color_violet !important;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
transition: background 0.5s ease;
}
/* Sidebar dropdown */
.sidebar .sidebar-dropdown* {
text-decoration: none;
}
.sidebar .sidebar-dropdown {
display: none;
}
.sidebar .sidebar-dropdown a {
color: #ddd;
background-color: #343434;
padding: 6px;
text-transform: uppercase;
text-align: center;
font-size: 13px;
display: block;
border-top: 1px solid #666;
border-bottom: 1px solid @color_side_nav;
}
.sidebar .sidebar-dropdown a:hover {
text-decoration: none;
}
/* Sidebar widget */
.sidebar .sidebar-widget {
padding: 10px 5px;
}
.sidebar .ui-datepicker {
width: 95%;
margin: 0 auto;
background: #111;
color: #888;
border: 0;
padding: 0;
}
.sidebar .ui-datepicker-header {
background: #222;
border: 1px solid #212121;
}
.sidebar .ui-datepicker-prev:hover {
background: transparent;
border: 0;
top: 2px !important;
left: 2px !important;
}
.sidebar .ui-datepicker-next:hover {
background: transparent;
border: 0;
top: 2px !important;
right: 2px !important;
}
.sidebar .ui-state-default {
background: #222;
border: 0;
text-align: center;
color: #ccc;
}
.sidebar .ui-state-default:hover {
background: #282828;
color: #999;
}
.sidebar .ui-state-hightlight, .sidebar .ui-state-active {
background: #444;
}
/* Main */
.mainbar {
position: relative;
margin-left: 230px;
margin-right: 0;
width: auto;
background: #fff;
min-height: 900px;
}
.mainbar .container {
width: 100%;
padding: 0 !important;
}
.mainbar-left {
.mainbar;
margin-left: .05rem;
padding-top: 5rem;
}
.mainbar-left-fit {
.mainbar-left;
min-height: 100%;
}
/* Navbar */
.navbar {
background: #000;
}
.navbar .container {
width: 97% !important;
}
.navbar .nav > li > a {
font-size: 13px !important;
color: @color_primary_white !important;
}
.navbar i {
margin-right: 3px;
}
.navbar .caret {
border-top-color: @color_primary_white !important;
border-bottom-color: @color_primary_white !important;
}
.navbar .nav-user-pic {
width: 20px;
margin-right: 10px;
}
.navbar .badge {
margin-left: 5px;
}
.navbar-default {
background-color: @color_top_nav;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover {
color: @color_top_nav;
background-color: transparent;
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
-ms-transition: all 150ms ease-in-out;
-o-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}
.navbar-default .navbar-nav > .active > a {
background-color: transparent;
color: @color_top_nav;
padding-bottom: 10px;
border-bottom: 5px solid @color_primary_white;
}
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > li > a:hover {
background-color: transparent;
color: @color_nav_bar;
padding-bottom: 0.62em;
border-bottom: 0.45em solid @color_nav_bar;
}
/* Footer ht-bottom-nav */
footer {
width: 100%;
height: 60px;
background-color: @color_bottom_nav;
position: absolute;
bottom: 0;
}
footer div {
width: 50%;
margin: auto;
}
footer div a {
width: 100%;
text-align: center;
}
/* Pagination*/
.pagination {
margin: 10px 0 5px 0;
}
.pagination ul > li > a, .pagination ul > li > span {
border: 1px solid #ccc;
margin-right: 3px;
padding: 3px 8px;
background-color: #fff;
color: #666;
}
.pagination ul > li > a:hover {
color: @color_top_nav;
background: #fafafa;
}
/* Page head */
.mainbar .page-head {
padding: 15px 20px;
border-bottom: 1px solid #fff;
}
.mainbar .page-meta {
font-size: 13px;
line-height: 15px;
margin-left: 2px;
display: block;
}
/* Matter */
.mainbar .matter {
border-top: 0px solid #ddd;
margin: 2em;
}
/* Widget */
.widget {
margin-top: 10px;
margin-bottom: 20px;
background: #fff;
}
.widget hr {
margin: 4px 0;
padding: 4px 0;
border-top: 0;
border-bottom: 1px solid #ddd;
}
.widget .table {
margin: 0;
width: 100%;
}
.widget .table-bordered {
border: 0;
}
.widget .table-bordered th {
border-bottom: 1px solid #ccc !important;
}
.widget .table-bordered td {
border-top: 0 !important;
border-bottom: 1px solid #ccc !important;
}
.widget .table-bordered td:first-child, .widget .table-bordered th:first-child {
border-left: 0;
}
.widget .padd {
padding: 15px;
}
.widget .widget-head {
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #777;
font-size: 18px;
padding: 12px 15px;
}
.widget .widget-head .widget-icons i {
font-size: 14px;
margin: 0 4px;
}
.widget .widget-head .widget-icons a {
color: #aaa;
}
.widget .widget-head .widget-icons a:hover {
color: #888;
}
.widget .widget-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.widget .widget-foot {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-top: 0;
padding: 8px 15px;
font-size: 13px;
color: #555;
min-height: 68px;
}
/* Widget colors */
.widget.wred .widget-head {
background-color: @color_important;
border: 1px solid @color_important;
color: #fff;
}
.widget.wlightblue .widget-head {
background-color: @color_lightblue;
border: 1px solid @color_lightblue;
color: #fff;
}
.widget.wblue .widget-head {
background-color: @color_gm_blue;
border: 1px solid @color_gm_blue;
color: #fff;
}
.widget.wgreen .widget-head {
background-color: @color_success;
border: 1px solid @color_success;
color: #fff;
}
.widget.worange .widget-head {
background-color: @color_warning;
border: 1px solid @color_warning;
color: #fff;
}
.widget.wviolet .widget-head {
background-color: @color_violet;
border: 1px solid @color_violet;
color: #fff;
}
.widget.wred .widget-head .widget-icons a,
.widget.wblue .widget-head .widget-icons a,
.widget.wlightblue .widget-head .widget-icons a,
.widget.worange .widget-head .widget-icons a,
.widget.wgreen .widget-head .widget-icons a,
.widget.wviolet .widget-head .widget-icons a {
color: #fff;
}
.widget.wred .widget-head .widget-icons a:hover,
.widget.wblue .widget-head .widget-icons a:hover,
.widget.wlightblue .widget-head .widget-icons a:hover,
.widget.worange .widget-head .widget-icons a:hover,
.widget.wgreen .widget-head .widget-icons a:hover,
.widget.wviolet .widget-head .widget-icons a:hover {
color: #eee;
}
/* Widget white extras */
.widget .nav-tabs > li a {
padding: 5px 10px;
}
.widget .nav-tabs {
}
.widget .tab-content {
/*margin-bottom: 10px;*/
}
.uib-tab-border-radius a {
border-radius: 0px !important;
}
/* Today datas */
.today-datas {
list-style-type: none;
padding: 0;
margin: 10px 0;
}
.today-datas li {
display: inline-block;
margin-bottom: 5px;
margin-right: 10px;
padding: 1.5em 1em;
background-color: #f8f8f8;
background: #f8f8f8;
border: 1px solid #ccc;
max-width: 100%;
text-align: center;
}
.today-datas li .spark {
margin-right: 10px;
}
.today-datas li .datas-text {
font-size: 13px;
padding: 7px 0 0 0;
font-weight: normal;
}
.today-datas li .datas-text span {
display: block;
font-size: 24px;
margin-bottom: 5px;
}
.today-datas li i {
font-size: 50px;
margin-right: 10px;
}
.today-datas li .dial {
margin-right: 10px !important;
}
/* Toggle button */
.toggle-button span {
font-size: 13px !important;
}
/* Gallery */
.gallery img {
max-width: 170px;
margin: 5px;
}
/* Responsive */
@media (max-width: 480px) {
.mainbar .page-head h2 {
float: none;
}
.mainbar .bread-crumb {
float: none;
margin-top: 10px;
}
.col-left {
width: 100%;
float: none;
margin-right: 0;
}
.col-right {
width: 100%;
float: none;
}
}
@media (max-width: 767px) {
body {
margin: 0 auto;
}
body .container {
width: 95%;
padding-left: 2.5%;
padding-right: 2.5%;
}
.content {
margin-left: -20px;
margin-right: -20px;
}
.mainbar .matter {
padding-left: 20px;
padding-right: 20px;
}
.form-inline button {
margin-left: 0;
}
/*
.navbar {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.nav-collapse .dropdown-big .dropdown-menu {
color: #bbb !important;
}
.nav-collapse .dropdown-big .dropdown-menu a {
color: #ccc !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.nav-collapse .dropdown-big .dropdown-menu a:hover {
color: #aaa !important;
}
.nav-collapse .dropdown-big .dropdown-menu h5 {
color: #eee !important;
}
.nav-collapse .dropdown-menu {
padding: 10px 10px !important;
}
.nav-collapse .dropdown-menu a {
color: #fff !important;
}
.nav-collapse .dropdown-menu a:hover {
background: transparent !important;
}
.nav-collapse .dropdown-menu hr {
border-top: 0 solid #eee;
border-bottom: 1px solid @color_top_nav;
}
*/
/*
.sidebar {
float: none;
width: 100%;
}
.sidebar .sidebar-dropdown {
display: block;
}
.sidebar .sidebar-inner {
display: none;
}
.sidebar .sidebar-widget {
text-align: center;
}
*/
.mainbar {
margin: 0;
float: none;
}
.today-datas {
text-align: center;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.form {
margin: 0 !important;
}
form .control-group {
margin: 0 !important;
}
form .control-label {
float: none !important;
width: auto !important;
text-align: left !important;
}
form .controls {
float: none !important;
margin-left: 0 !important;
}
form .form-actions {
padding-left: 0 !important;
}
.navbar {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.nav-collapse .dropdown-big .dropdown-menu {
/*color: #bbb !important;*/
color: @color_top_nav;
}
.nav-collapse .dropdown-big .dropdown-menu a {
/*color: #ccc !important;*/
color: @color_top_nav;
padding-left: 0 !important;
padding-right: 0 !important;
}
.nav-collapse .dropdown-big .dropdown-menu a:hover {
/*color: #aaa !important;*/
color: @color_top_nav;
}
.nav-collapse .dropdown-big .dropdown-menu h5 {
/*color: #eee !important;*/
color: @color_top_nav;
}
.nav-collapse .dropdown-menu {
padding: 10px 10px !important;
}
.nav-collapse .dropdown-menu a {
/*color: #fff !important;*/
color: @color_top_nav;
}
.nav-collapse .dropdown-menu a:hover {
background: transparent !important;
}
.nav-collapse .dropdown-menu hr {
border-top: 0 solid #eee;
border-bottom: 1px solid @color_top_nav;
}
.sidebar {
width: 200px;
}
.mainbar {
margin-left: 200px;
}
}
/*#region Widgets */
/* maps */
.map iframe {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
/* maps ends */
/* Users starts */
.user h6 {
line-height: 17px !important;
}
.user {
font-size: 12px !important;
line-height: 20px !important;
}
.user img {
max-width: 70px;
margin-top: 10px;
cursor: pointer;
}
.user .user-pic {
float: left;
width: 80px;
}
.user .user-details {
margin-left: 85px;
}
.user .btn {
font-size: 11px !important;
}
/* Users ends */
/*#endregion */
/*#region Override background color theme */
/*For Bootstrap 3*/
.nav, .pagination, .carousel, .panel-title a {
cursor: pointer;
}
body {
background-color: #FFF;
}
.sidebar-widget form {
margin: 0em -1em;
}
.sidebar .navi > li > a {
background-color: @color_side_nav !important;
}
.sidebar .navi li ul li a {
color: #fff;
}
.sidebar .navi li ul li a:hover {
color: @color_lightblue;
}
.sidebar .navi li ul li a:disabled {
color: #999;
}
.navbar-inverse .btn-navbar {
background-color: @color_top_nav;
}
/*
.navbar-inverse {
background-color: @color_top_nav;
}
*/
.navbar-inverse .btn-navbar:hover {
background-color: @color_top_nav;
}
.sidebar {
margin-top: -2px;
}
.sidebar .sidebar-inner {
background-color: @color_side_nav;
}
.sidebar-filler {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
background-color: @color_side_nav;
width: 230px;
}
/*#endregion */
/* #region Main Styles */
ul.image-group {
padding: 0 0 0 0;
margin: 0 0 0 0;
}
ul.image-group li {
list-style: none;
margin-bottom: 25px;
}
.ng-cloak {
display: none !important;
}
select > option {
color: black;
}
input.form-control,
select.form-control,
textarea.form-control {
/*width: 205px;*/
display: inline;
display: block;
width: 50%;
max-width: 30em;
border-radius: 0px;
}
input.form-control-wide,
select.form-control-wide,
textarea.form-control-wide {
/*width: 205px;*/
display: inline;
display: block;
width: 95%;
max-width: 70em;
}
.widget .padd {
/*margin-bottom: 0;*/
/*padding: 1em 0;*/
height: 12em;
}
.widget .padd.padd-tight {
padding: 6px;
}
.list-flow.list-flow-tight {
width: 90px;
}
.form-column {
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
align-items: center;
}
.form-row {
-webkit-flex-direction: row;
display: flex;
flex-direction: row;
align-items: center;
}
.form-padding {
padding-right: 10px;
padding-left: 10px;
}
.map {
height: 228px;
}
.btn > i {
margin-right: 8px;
}
.btn {
margin-right: 4px;
margin-left: 4px;
}
.btn.btn-notext > i {
margin-right: 0;
}
.btn-group {
margin: .2em;
}
small {
font-size: 14px;
}
.text-subtle {
color: #b7b7b7;
}
.page-title-subtle {
color: white;
}
.page-title {
color: #EEE;
margin-right: 12px;
}
.right {
clear: right;
float: right;
}
.widget-content .padd:hover {
cursor: pointer;
color: white;
background-color: @color_lightblue;
}
.widget-content .padd:hover * {
color: white;
}
.list-flow {
margin: 6px;
float: left;
width: 110px;
height: 120px;
border-bottom: solid 0 transparent;
padding: 1.5% .5%;
}
.name-stack h5 {
text-align: center;
padding: 0;
margin: 0;
line-height: 18px !important;
}
.search-query {
margin: 2px auto 8px auto !important;
}
.fa-search {
color: @color_primary_white;
}
.form-search {
min-height: 2em;
}
.input-group[class*="col-"] {
width: 80%;
margin: 0 1.5em;
}
.user .user-pic {
display: block;
margin: auto;
}
.user .user-details {
margin-left: 100px;
margin-right: 10px;
}
.widget-content {
padding: 1em;
margin: 0;
/*min-height: 565px;*/
height: inherit;
}
.view-pane {
min-height: 650px;
max-height: 650px;
overflow-y: auto;
}
.widget-content-no-padding {
padding: 0px;
margin: 0;
min-height: 565px;
height: inherit;
}
.widget-content-small {
padding: 1em;
margin: 0;
min-height: 100px;
height: inherit;
}
.widget-content-min {
.widget-content;
min-height: 100%;
}
.stacked {
float: none !important;
display: block;
margin: auto;
}
.navbar .navbar-brand {
/*background: url(../images/gg.png) no-repeat left top !important;*/
margin: 0 1em;
height: 45px;
}
.navbar .brand-title {
/*margin-left: 4em;*/
color: @color_primary_white;
margin: 0 1em;
height: 45px;
}
.navbar-logo img {
height: 20px;
display: inline;
}
.navbar-version {
color: @color_primary_white;
margin: 1em;
}
.today-datas li {
padding: 20px 14px;
height: 9em;
}
/*#region Splash */
#splash-page {
z-index: 99999 !important;
}
#splash-page .bar {
width: 100%;
}
.page-splash {
z-index: 99999 !important;
position: fixed !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: @color_top_nav;
opacity: .9;
pointer-events: auto;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.page-splash-message {
text-align: center;
margin: 20% auto 0 auto;
font-size: 400%;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
font-weight: normal;
-webkit-text-shadow: 2px 2px #000000;
text-shadow: 2px 2px #000000;
text-shadow: 2px 2px rgba(0, 0, 0, 0.15);
text-transform: uppercase;
text-decoration: none;
color: #F58A00;
padding: 0;
}
.page-splash-message.page-splash-message-subtle {
margin: 30% auto 0 auto;
font-size: 200%;
}
.flag-haschanges {
position: fixed !important;
display: inline;
}
.fa-asterisk.fa-asterisk-large {
font-size: 180%;
vertical-align: middle;
color: #F58A00;
}
.fa-asterisk.fa-asterisk-alert {
color: #F58A00;
}
.fa-asterisk-inline {
padding: 0 4px 0 0;
}
.progress,
.page-progress-bar {
margin: 30px 10% !important;
}
.ngplus-overlay-background {
top: 0px;
left: 0px;
padding-left: 100px;
position: absolute;
z-index: 10000;
height: 100%;
width: 100%;
background-color: #808080;
opacity: 0.2;
}
.ngplus-overlay-content {
position: absolute;
/*border: 1px solid #000;*/
/*background-color: #fff;*/
font-weight: bold;
height: 100px;
width: 300px;
height: 15em;
width: 20em;
z-index: 10000;
text-align: center;
}
.page-spinner-message {
text-align: center;
font-size: 400%;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
font-weight: normal;
-webkit-text-shadow: 2px 2px #000000;
text-shadow: 2px 2px #000000;
text-shadow: 2px 2px rgba(0, 0, 0, 0.15);
text-transform: uppercase;
text-decoration: none;
color: #F58A00;
padding: 0;
}
.page-spinner-message.page-spinner-message-subtle {
margin: 30% auto 0 auto;
font-size: 200%;
}
.overlay-message {
font-size: 200%;
}
.spinner {
margin: 20% auto 0 auto;
left: auto;
top: auto !important;
}
/*#endregion*/
table th > a {
font-weight: bold;
}
table th,
table td {
text-align: left;
vertical-align: middle;
}
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
cursor: pointer;
}
.widget-content.referrer {
border-width: 0;
}
a {
cursor: pointer;
}
/* #endregion */
.customer-name {
font-size: 1.2em;
}
.customer-thumb {
margin: 0.1em !important;
padding: 0.1em;
}
/*#region wrapper for angular ng-include and ng-view animations*/
.view-container {
position: relative;
overflow: hidden;
}
/*#endregion */
/*#region Angular ng-include, ng-view, ng-repeat shuffle animations*/
.shuffle-animation.ng-enter,
.shuffle-animation.ng-leave {
position: relative;
}
.shuffle-animation.ng-enter {
-moz-transition: ease-out all 0.3s 0.4s;
-o-transition: ease-out all 0.3s 0.4s;
-webkit-transition: ease-out all 0.3s 0.4s;
transition: ease-out all 0.3s 0.4s;
left: 2em;
opacity: 0;
}
.shuffle-animation.ng-enter.ng-enter-active {
left: 0;
opacity: 1;
}
.shuffle-animation.ng-leave {
-moz-transition: 0.3s ease-out all;
-o-transition: 0.3s ease-out all;
-webkit-transition: 0.3s ease-out all;
transition: 0.3s ease-out all;
left: 0;
opacity: 1;
}
.shuffle-animation.ng-leave.ng-leave-active {
left: 2em;
opacity: 0;
}
/*#endregion*/
/*#region Angular ng-include, ng-view, ng-repeat fader animation */
.fader-animation.ng-enter,
.fader-animation.ng-leave,
.fader-animation.ng-move {
position: relative;
}
.fader-animation.ng-enter,
.fader-animation.ng-leave {
-webkit-transition: cubic-bezier(0.250, 0.460, 0.450, 0.940) all 0.5s;
-moz-transition: cubic-bezier(0.250, 0.460, 0.450, 0.940) all 0.5s;
-o-transition: cubic-bezier(0.250, 0.460, 0.450, 0.940) all 0.5s;
transition: cubic-bezier(0.250, 0.460, 0.450, 0.940) all 0.5s;
opacity: 1;
}
.fader-animation.ng-enter,
.fader-animation.ng-leave.ng-leave-active {
opacity: 0;
}
.fader-animation.ng-enter.ng-enter-active {
opacity: 1;
}
.fader-animation.ng-move {
opacity: 0.5;
}
.fader-animation.ng-move.ng-move-active {
opacity: 1;
}
.ng-invalid.ng-dirty .area-name-input {
color: red;
}
/*#endregion*/
/*#region Angular ng-show dissolve animation */
.dissolve-animation.ng-hide-remove,
.dissolve-animation.ng-hide-add {
position: fixed !important;
display: inline !important;
-webkit-transition: 0.5s linear all;
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
transition: 0.5s linear all;
}
.dissolve-animation.ng-hide-remove.ng-hide-remove-active,
.dissolve-animation.ng-hide-add {
opacity: 1;
}
.dissolve-animation.ng-hide-add.ng-hide-add-active,
.dissolve-animation.ng-hide-remove {
opacity: 0;
}
/*#endregion */
/*#region toastr */
#toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div {
margin: 4px auto;
}
/*#endregion */
/*#region Responsive */
@media (max-width: 979px) {
.sidebar-filler {
width: 200px;
}
.nav-collapse {
clear: none;
}
.nav-collapse .nav > li {
float: left;
}
.navbar .btn-navbar {
display: none;
}
.nav-collapse,
.nav-collapse.collapse {
height: inherit;
overflow: inherit;
}
.page-splash-message {
font-size: 300%;
}
.btn-group.pull-right {
float: none !important;
display: block;
}
}
@media (min-width: 768px) {
.sidebar .sidebar-inner {
display: block !important;
}
}
@media (max-width: 767px) {
.sidebar-filler {
display: none;
}
.nav-collapse {
clear: both;
}
.nav-collapse .nav > li {
float: none;
}
.navbar .btn-navbar {
display: block;
}
.nav-collapse,
.nav-collapse.collapse {
height: 0;
overflow: hidden;
}
.page-splash-message {
font-size: 200%;
margin: 40% auto 0 auto;
}
.page-splash-message.page-splash-message-subtle {
font-size: 150%;
}
.sidebar .sidebar-inner {
height: inherit;
}
}
@media (max-width: 480px) {
input.form-control, select.form-control, textarea.form-control {
width: 70%;
}
}
@media (max-width: 480px) {
input.form-control-wide, select.form-control-wide, textarea.form-control-wide {
width: 70%;
}
}
@media (max-width: 480px) {
ui-select.form-control {
width: 70%;
}
}
@media (max-width: 320px) {
.today-datas li {
padding: 1em .5em;
line-height: 1em;
}
.today-datas li i {
font-size: 2em;
}
.today-datas li .datas-text span {
font-size: 1em;
}
.btn {
margin: .2em;
width: 7em;
}
.btn-group > .btn {
display: block;
width: 7em;
}
.btn-group.pull-right {
margin: .2em 0;
}
input,
select {
width: 85% !important;
}
textarea {
width: 80%;
}
.img-thumbnail.user-pic {
width: 5em;
}
.user .user-details {
margin-left: 7em;
margin-right: .5em;
}
h3 {
font-size: 1.5em !important;
line-height: 1.2em !important;
}
/* page slider */
/* Needed for hiding scrollbars when pushing */
html {
overflow-x: hidden;
}
.ng-pageslide {
background: #eee;
}
body.ng-pageslide-body-open::before {
content: '.';
display: block;
position: absolute;
top: 50px;
background-color: rgb(0,0,0);
left: 0;
right: 0;
bottom: 0;
z-index: 1;
opacity: 0.5;
transition: opacity 1s;
}
body.ng-pageslide-body-closed::before {
transition: opacity 1s;
opacity: 0;
content: '.';
display: block;
position: absolute;
top: 50px;
background-color: rgb(0,0,0);
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
}
}
/*#endregion */
* {
/*-webkit-box-shadow: none !important;
-ms-box-shadow: none !important;
box-shadow: none !important;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false) !important;
-webkit-text-shadow: none !important;
-ms-text-shadow: none !important;
text-shadow: none !important;*/
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
/*font-weight: 400;*/
}
.btn,
.badge,
.modal,
.modal-dialog,
.modal-content,
input,
select {
border-radius: 0 !important;
}
input,
select {
padding: 4px !important;
/*width: 65% !important;*/
display: inline-block !important;
}
.navbar * {
background-image: none !important;
-webkit-text-shadow: none !important;
-ms-text-shadow: none !important;
text-shadow: none !important;
}
form * {
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}
input,
textarea {
background-image: none !important;
border: 1px solid #ccc !important;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}
uib-tabset .tabBottom {
margin-bottom: 20px;
height: inherit;
min-height: 300px;
}
.list {
list-style: none outside none;
margin: 10px 0 30px;
}
.apps-container {
border: 2px dashed blue;
margin: 10px 10px 0 0;
padding: 5px;
height: inherit;
min-height: 585px;
}
.apps-control-container {
border: 2px solid blue;
margin: 10px 2px 0 0;
padding: 10px 10px 10px 10px;
height: inherit;
min-height: 100%;
}
.app {
width: 170px;
padding: 5px 10px;
margin: 5px 0;
border: 2px solid #444;
border-radius: 5px;
background-color: #EA8A8A;
font-size: 1.1em;
font-weight: bold;
text-align: center;
cursor: move;
}
legend {
font-size: 18px;
}
/**
* For the correct positioning of the placeholder element, the dnd-list and
* it's children must have position: relative
*/
.multiDemo ul[dnd-list],
.multiDemo ul[dnd-list] > li {
position: relative;
}
/**
* The dnd-list should always have a min-height,
* otherwise you can't drop into it once it's empty
*/
.multiDemo ul[dnd-list] {
min-height: 42px;
padding-left: 0px;
}
/**
* An element with .dndPlaceholder class will be
* added to the dnd-list while the user is dragging
* over it.
*/
.multiDemo ul[dnd-list] .dndPlaceholder {
display: block;
background-color: #ddd;
min-height: 42px;
}
/**
* The dnd-lists's child elements currently MUST have
* position: relative. Otherwise we can not determine
* whether the mouse pointer is in the upper or lower
* half of the element we are dragging over. In other
* browsers we can use event.offsetY for this.
*/
.multiDemo ul[dnd-list] li {
background-color: #fff;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
list-style-type: none;
}
/**
* Show selected elements in green
*/
.multiDemo ul[dnd-list] li.selected {
background-color: #dff0d8;
color: #3c763d;
}
div.treeFormat {
font-size: 16px;
height: inherit;
min-height: 625px;
background-color: #f5f5f5;
padding: 15px 5px 5px 5px;
}
uib-tabset.tabHeight {
min-height: 400px;
height: inherit;
}
select {
font-size: 13px !important;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}
input[type="radio"],
input[type="checkbox"] {
margin: 0 0 0 !important;
margin-right: 5px !important;
line-height: 23px !important;
border: 0 !important;
}
.btn {
background-image: none !important;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
font-size: 13px !important;
}
.btn.btn-form-md {
margin: 0 .5em .2em .5em;
width: 9em;
}
.btn.btn-mini {
font-size: 11px !important;
}
textarea {
resize: none;
}
body {
font-size: 13px;
line-height: 23px;
color: #666;
background: #111;
padding-top: 45px;
-webkit-font-smoothing: antialiased;
}
body .container {
width: 97%;
padding-left: 1.5%;
padding-right: 1.5%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 2px 0;
margin: 2px 0;
color: #777;
font-weight: 400;
}
h2 {
font-size: 30px;
line-height: 40px;
}
h3 {
font-size: 23px;
line-height: 33px;
}
h4 {
font-size: 20px;
line-height: 30px;
}
h5 {
font-size: 18px;
line-height: 28px;
}
h6 {
font-size: 15px;
line-height: 25px;
}
p {
padding: 1px 0 !important;
margin: 1px 0 !important;
}
a {
color: #015A81;
text-decoration: none !important;
}
a:hover {
color: #888;
text-decoration: none;
}
a:hover,
a:focus,
a:active {
outline: 0;
}
.bold {
font-weight: 600;
}
hr {
margin: 8px 0 8px 0 !important;
padding: 0 !important;
border-top: 0;
border-bottom: 1px solid #ddd !important;
height: 0;
}
:focus {
outline: none;
}
::-moz-focus-inner {
border: 0;
}
.well {
padding: 10px 15px;
}
a.btn {
font-size: 13px !important;
}
.label {
font-weight: 400;
padding: 3px 6px !important;
font-size: 13px;
}
.control-label {
font-weight: 400 !important;
font-size: 14px;
}
.badge {
font-weight: 400;
padding: 3px 8px;
font-size: 13px;
}
.progress {
height: 17px;
line-height: 17px;
margin: 5px 0 !important;
border: 0;
}
.progress .bar {
font-size: 12px;
}
/* Button colors */
.btn.btn-primary {
background: #1171a3 !important;
}
.btn.btn-primary:hover {
background: #0f608b !important;
}
.btn.btn-info {
background: #52b9e9 !important;
}
.btn.btn-info:hover {
background: #459fc9 !important;
}
.btn.btn-success {
background: #43c83c !important;
}
.btn.btn-success:hover {
background: #36a530 !important;
}
.btn.btn-warning {
background: #f88529 !important;
}
.btn.btn-warning:hover {
background: #d67323 !important;
}
.btn.btn-danger {
background: #fa3031 !important;
}
.btn.btn-danger:hover {
background: #d82829 !important;
}
/* Label colors */
.label.label-success,
.badge.badge-success {
background: #43c83c !important;
}
.label.label-warning,
.badge.badge-warning {
background: #f88529 !important;
}
.label.label-important,
.badge.badge-important {
background: #fa3031 !important;
}
.label.label-info,
.badge.badge-info {
background: #52b9e9 !important;
}
/* Background colors */
.blightblue {
background: #52b9e9 !important;
color: #fff !important;
border: 0 !important;
}
.bblue {
background: #1171a3 !important;
color: #fff !important;
border: 0 !important;
}
.bgreen {
background: #43c83c !important;
color: #fff !important;
border: 0 !important;
}
.borange {
background: #f88529 !important;
color: #fff !important;
border: 0 !important;
}
.bred {
background: #fa3031 !important;
color: #fff !important;
border: 0 !important;
}
.bviolet {
background: #932ab6 !important;
color: #fff !important;
border: 0 !important;
}
.blightblue h2,
.blightblue h3,
.blightblue h3,
.blightblue h4,
.blightblue h5,
.blightblue h6,
.bblue h2,
.bblue h3,
.bblue h3,
.bblue h4,
.bblue h5,
.bblue h6,
.bgreen h2,
.bgreen h3,
.bgreen h3,
.bgreen h4,
.bgreen h5,
.bgreen h6,
.bred h2,
.bred h3,
.bred h3,
.bred h4,
.bred h5,
.bred h6,
.bviolet h2,
.bviolet h3,
.bviolet h3,
.bviolet h4,
.bviolet h5,
.bviolet h6,
.borange h2,
.borange h3,
.borange h3,
.borange h4,
.borange h5,
.borange h6 {
color: #fff !important;
}
.blightblue a,
.bblue a,
.bgreen a,
.bred a,
.borange a,
.bviolet a {
color: #eee !important;
}
.blightblue a:hover,
.bblue a:hover,
.bgreen a:hover,
.bred a:hover,
.borange a:hover,
.bviolet a:hover {
color: #ddd !important;
}
/* Text colors */
.lightblue {
color: #52b9e9 !important;
}
.blue {
color: #1171a3 !important;
}
.green {
color: #43c83c !important;
}
.orange {
color: #f88529 !important;
}
.red {
color: #fa3031 !important;
}
.violet {
color: #932ab6 !important;
}
/* Modal */
.modal-header {
padding-top: 7px;
padding-bottom: 7px;
}
modal-title {
background-color: #ddd;
}
/* Form */
form {
margin: 10px;
}
form input,
form button,
form textarea,
form select {
font-size: 13px !important;
}
form label {
font-size: 13px;
line-height: 13px;
}
.form-inline button {
margin-left: 15px;
}
.form-horizontal .control-label {
width: 140px;
}
.form-horizontal .controls {
margin-left: 110px;
}
.form-horizontal .controls:first-child {
*padding-left: 100px;
}
.form-horizontal .form-actions {
padding-left: 110px;
}
.form-actions {
padding: 5px 20px 5px;
background: transparent;
border-top: 0;
}
/* Red border for invalid */
.ng-invalid.ng-dirty {
border-color: #FA787E;
}
/* Green border for valid */
.ng-valid.ng-dirty {
border-color: #78FA89;
}
/* Back to top */
.totop {
position: fixed;
bottom: 0;
left: 0;
z-index: 104400;
background: #fa3031;
display: none;
}
.totop a,
.totop a:visited {
display: block;
width: 30px;
height: 30px;
color: #fff;
text-align: center;
line-height: 30px;
}
.totop a:hover {
color: #eee;
text-decoration: none;
}
/* Half column - CHECK LATER */
.col-left {
width: 48%;
float: left;
}
.col-right {
width: 48%;
float: right;
}
/* Dropdown menu */
.dropdown-big .dropdown-menu {
-moz-min-width: 250px;
-ms-min-width: 250px;
-o-min-width: 250px;
-webkit-min-width: 250px;
min-width: 250px;
padding: 8px 10px;
background: #fff;
}
.dropdown-big .dropdown-menu p {
margin: 1px 0;
padding: 1px 0;
font-size: 12px;
line-height: 18px;
}
.dropdown-big .dropdown-menu a {
font-size: 13px;
line-height: 23px;
background: transparent;
padding: 0;
color: #444 !important;
display: inline;
}
.dropdown-big .dropdown-menu a:hover {
color: #777 !important;
background: transparent !important;
}
.dropdown-big .dropdown-menu .drop-foot {
text-align: center;
}
.dropdown-big .dropdown-menu .drop-foot a {
font-size: 12px !important;
}
.dropdown-big .dropdown-menu hr {
padding: 0;
margin: 8px 0;
border-top: 0 solid #aaa;
border-bottom: 1px solid #eee;
}
.dropdown-big .dropdown-menu h5 {
color: #666 !important;
line-height: 18px;
font-weight: bold;
font-size: 13px;
}
.dropdown-menu {
background: #fff;
border-radius: 0;
border: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.dropdown-menu li {
color: #777;
font-size: 13px;
line-height: 18px;
}
.dropdown-menu li > a {
color: #555;
line-height: 23px !important;
}
.dropdown-menu li > a:hover {
background: #f9f9f9 !important;
-webkit-filter: none;
filter: none;
color: #888;
}
.dropdown-menu a:hover,
.dropdown-menu a:focus {
-webkit-filter: none !important;
filter: none !important;
background: #fff !important;
}
.dropdown-menu::after,
.dropdown-menu::before {
border: none !important;
}
/* Navbar */
.navbar {
background: #000;
}
.navbar .container {
width: 97% !important;
}
.navbar .nav > li > a {
font-size: 13px !important;
color: #fff !important;
}
.navbar i {
margin-right: 3px;
}
.navbar .caret {
border-top-color: #fff !important;
border-bottom-color: #fff !important;
}
.navbar .nav-user-pic {
width: 20px;
margin-right: 10px;
}
.navbar .badge {
margin-left: 5px;
}
/* Sidebar */
.sidebar {
width: 230px;
float: left;
display: block;
background: #00008b;
color: #eee;
position: relative;
}
.sidebar hr {
border-bottom: 1px solid #373737 !important;
}
.sidebar ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.sidebar ul li {
list-style-type: none;
}
.sidebar .sidebar-inner {
display: block;
width: 100%;
margin: 0 auto;
position: absolute;
z-index: 60;
background: #111;
}
.sidebar .navi li i {
margin-right: 5px;
}
.sidebar .navi li span i {
margin: 0;
}
.sidebar .navi > li > a {
display: block;
padding: 12px 20px;
font-size: 15px;
line-height: 25px;
color: #fff;
text-decoration: none;
border-bottom: 1px solid #222;
background-color: #111;
}
.sidebar .navi > li > a:hover,
.sidebar .navi > li.open > a {
border-bottom: 1px solid #222;
background-color: #222;
color: #fff;
}
.sidebar .navi li ul {
display: none;
background: #181818;
}
.sidebar .navi li.open ul {
display: block;
}
.sidebar .navi li ul li a {
display: block;
background: none;
padding: 10px 0;
padding-left: 30px;
text-decoration: none;
color: #999;
border-bottom: 1px solid #222;
}
.sidebar .navi li ul li.active a {
background: #131313;
border-bottom: 1px solid #222;
}
.sidebar .navi li ul li a:hover {
background: #131313;
border-bottom: 1px solid #222;
}
/* Sidebar colors */
.sidebar .navi > li.nlightblue > a:hover,
.sidebar .navi > li.open.nlightblue > a,
.sidebar .navi > li.current.nlightblue > a {
background: #52b9e9 !important;
transition: background 0.5s ease;
}
.sidebar .navi > li.nblue > a:hover,
.sidebar .navi > li.open.nblue > a,
.sidebar .navi > li.current.nblue > a {
background: #1171a3 !important;
transition: background 0.5s ease;
}
.sidebar .navi > li.ngreen > a:hover,
.sidebar .navi > li.open.ngreen > a,
.sidebar .navi > li.current.ngreen > a {
background: #43c83c !important;
transition: background 0.5s ease;
}
.sidebar .navi > li.norange > a:hover,
.sidebar .navi > li.open.norange > a,
.sidebar .navi > li.current.norange > a {
background: #f88529 !important;
transition: background 0.5s ease;
}
.sidebar .navi > li.nred > a:hover,
.sidebar .navi > li.open.nred > a,
.sidebar .navi > li.current.nred > a {
background: #fa3031 !important;
transition: background 0.5s ease;
}
.sidebar .navi > li.nviolet > a:hover,
.sidebar .navi > li.open.nviolet > a,
.sidebar .navi > li.current.nviolet > a {
background: #932ab6 !important;
transition: background 0.5s ease;
}
/* Sidebar dropdown */
.sidebar .sidebar-dropdown* {
text-decoration: none;
}
.sidebar .sidebar-dropdown {
display: none;
}
.sidebar .sidebar-dropdown a {
color: #ddd;
background-color: #343434;
padding: 6px;
text-transform: uppercase;
text-align: center;
font-size: 13px;
display: block;
border-top: 1px solid #666;
border-bottom: 1px solid #373737;
}
.sidebar .sidebar-dropdown a:hover {
text-decoration: none;
}
/* Sidebar widget */
.sidebar .sidebar-widget {
padding: 10px 5px;
}
.sidebar .ui-datepicker {
width: 95%;
margin: 0 auto;
background: #111;
color: #888;
border: 0;
padding: 0;
}
.sidebar .ui-datepicker-header {
background: #222;
border: 1px solid #212121;
}
.sidebar .ui-datepicker-prev:hover {
background: transparent;
border: 0;
top: 2px !important;
left: 2px !important;
}
.sidebar .ui-datepicker-next:hover {
background: transparent;
border: 0;
top: 2px !important;
right: 2px !important;
}
.sidebar .ui-state-default {
background: #222;
border: 0;
text-align: center;
color: #ccc;
}
.sidebar .ui-state-default:hover {
background: #282828;
color: #999;
}
.sidebar .ui-state-hightlight,
.sidebar .ui-state-active {
background: #444;
}
/* Main */
.mainbar {
position: relative;
margin-left: 230px;
margin-right: 0;
width: auto;
background: #fff;
min-height: 900px;
}
.mainbar .container {
width: 100%;
padding: 0 !important;
}
/* Pagination*/
.pagination {
margin: 10px 0 5px 0;
}
.pagination ul > li > a,
.pagination ul > li > span {
border: 1px solid #ccc;
margin-right: 3px;
padding: 3px 8px;
background-color: #fff;
color: #666;
}
.pagination ul > li > a:hover {
color: #015A81;
background: #fafafa;
}
/* Page head */
.mainbar .page-head {
padding: 15px 20px;
border-bottom: 1px solid #fff;
}
.mainbar .page-meta {
font-size: 13px;
line-height: 15px;
margin-left: 2px;
display: block;
}
/* Matter */
.mainbar .matter {
border-top: 0px solid #ddd;
margin: 2em;
}
/* Widget */
.widget {
margin-top: 10px;
margin-bottom: 20px;
background: #fff;
}
.widget hr {
margin: 4px 0;
padding: 4px 0;
border-top: 0;
border-bottom: 1px solid #ddd;
}
.widget .table {
margin: 0;
width: 100%;
}
.widget .table-bordered {
border: 0;
}
.widget .table-bordered th {
border-bottom: 1px solid #ccc !important;
}
.widget .table-bordered td {
border-top: 0 !important;
border-bottom: 1px solid #ccc !important;
}
.widget .table-bordered td:first-child,
.widget .table-bordered th:first-child {
border-left: 0;
}
.widget .padd {
padding: 15px;
}
.widget .widget-head {
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #777;
font-size: 18px;
padding: 12px 15px;
}
.widget .widget-head .widget-icons i {
font-size: 14px;
margin: 0 4px;
}
.widget .widget-head .widget-icons a {
color: #aaa;
}
.widget .widget-head .widget-icons a:hover {
color: #888;
}
.widget .widget-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.widget .widget-foot {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-top: 0;
padding: 8px 15px;
font-size: 13px;
color: #555;
}
/* Widget colors */
.widget.wred .widget-head {
background-color: #fa3031;
border: 1px solid #fa3031;
color: #fff;
}
.widget.wlightblue .widget-head {
background-color: #52b9e9;
border: 1px solid #52b9e9;
color: #fff;
}
.widget.wblue .widget-head {
background-color: #1171a3;
border: 1px solid #1171a3;
color: #fff;
}
.widget.wgreen .widget-head {
background-color: #43c83c;
border: 1px solid #43c83c;
color: #fff;
}
.widget.worange .widget-head {
background-color: #f88529;
border: 1px solid #f88529;
color: #fff;
}
.widget.wviolet .widget-head {
background-color: #932ab6;
border: 1px solid #932ab6;
color: #fff;
}
.widget.wred .widget-head .widget-icons a,
.widget.wblue .widget-head .widget-icons a,
.widget.wlightblue .widget-head .widget-icons a,
.widget.worange .widget-head .widget-icons a,
.widget.wgreen .widget-head .widget-icons a,
.widget.wviolet .widget-head .widget-icons a {
color: #fff;
}
.widget.wred .widget-head .widget-icons a:hover,
.widget.wblue .widget-head .widget-icons a:hover,
.widget.wlightblue .widget-head .widget-icons a:hover,
.widget.worange .widget-head .widget-icons a:hover,
.widget.wgreen .widget-head .widget-icons a:hover,
.widget.wviolet .widget-head .widget-icons a:hover {
color: #eee;
}
/* Widget white extras */
.widget .nav-tabs > li a {
padding: 5px 10px;
}
.widget .nav-tabs {
margin-bottom: 5px;
}
.widget .tab-content {
margin-bottom: 10px;
}
/* Today datas */
.today-datas {
list-style-type: none;
padding: 0;
margin: 10px 0;
}
.today-datas li {
display: inline-block;
margin-bottom: 5px;
margin-right: 10px;
padding: 1.5em 1em;
background-color: #f8f8f8;
background: #f8f8f8;
border: 1px solid #ccc;
max-width: 100%;
text-align: center;
}
.today-datas li .spark {
margin-right: 10px;
}
.today-datas li .datas-text {
font-size: 13px;
padding: 7px 0 0 0;
font-weight: normal;
}
.today-datas li .datas-text span {
display: block;
font-size: 24px;
margin-bottom: 5px;
}
.today-datas li i {
font-size: 50px;
margin-right: 10px;
}
.today-datas li .dial {
margin-right: 10px !important;
}
/* Toggle button */
.toggle-button span {
font-size: 13px !important;
}
/* Gallery */
.gallery img {
max-width: 170px;
margin: 5px;
}
/* Responsive */
@media (max-width: 480px) {
.mainbar .page-head h2 {
float: none;
}
.mainbar .bread-crumb {
float: none;
margin-top: 10px;
}
.col-left {
width: 100%;
float: none;
margin-right: 0;
}
.col-right {
width: 100%;
float: none;
}
}
@media (max-width: 767px) {
body {
margin: 0 auto;
}
body .container {
width: 95%;
padding-left: 2.5%;
padding-right: 2.5%;
}
.content {
margin-left: -20px;
margin-right: -20px;
}
.mainbar .matter {
padding-left: 20px;
padding-right: 20px;
}
.form-inline button {
margin-left: 0;
}
.navbar {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.nav-collapse .dropdown-big .dropdown-menu {
color: #bbb !important;
}
.nav-collapse .dropdown-big .dropdown-menu a {
color: #ccc !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.nav-collapse .dropdown-big .dropdown-menu a:hover {
color: #aaa !important;
}
.nav-collapse .dropdown-big .dropdown-menu h5 {
color: #eee !important;
}
.nav-collapse .dropdown-menu {
padding: 10px 10px !important;
}
.nav-collapse .dropdown-menu a {
color: #fff !important;
}
.nav-collapse .dropdown-menu a:hover {
background: transparent !important;
}
.nav-collapse .dropdown-menu hr {
border-top: 0 solid #eee;
border-bottom: 1px solid #015A81;
}
.sidebar {
float: none;
width: 100%;
}
.sidebar .sidebar-dropdown {
display: block;
}
.sidebar .sidebar-inner {
display: none;
}
.sidebar .sidebar-widget {
text-align: center;
}
.mainbar {
margin: 0;
float: none;
}
.today-datas {
text-align: center;
}
}
@media (min-width: 768px) and (max-width: 979px) {
.form {
margin: 0 !important;
}
form .control-group {
margin: 0 !important;
}
form .control-label {
float: none !important;
width: auto !important;
text-align: left !important;
}
form .controls {
float: none !important;
margin-left: 0 !important;
}
form .form-actions {
padding-left: 0 !important;
}
.navbar {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.nav-collapse .dropdown-big .dropdown-menu {
color: #bbb !important;
}
.nav-collapse .dropdown-big .dropdown-menu a {
color: #ccc !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.nav-collapse .dropdown-big .dropdown-menu a:hover {
color: #aaa !important;
}
.nav-collapse .dropdown-big .dropdown-menu h5 {
color: #eee !important;
}
.nav-collapse .dropdown-menu {
padding: 10px 10px !important;
}
.nav-collapse .dropdown-menu a {
color: #fff !important;
}
.nav-collapse .dropdown-menu a:hover {
background: transparent !important;
}
.nav-collapse .dropdown-menu hr {
border-top: 0 solid #eee;
border-bottom: 1px solid #015A81;
}
.sidebar {
width: 200px;
}
.mainbar {
margin-left: 200px;
}
}
/*#region Widgets */
/* maps */
.map iframe {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
/* maps ends */
/* Users starts */
.user h6 {
line-height: 17px !important;
}
.user {
font-size: 12px !important;
line-height: 20px !important;
}
.user img {
max-width: 70px;
margin-top: 10px;
cursor: pointer;
}
.user .user-pic {
float: left;
width: 80px;
}
.user .user-details {
margin-left: 85px;
}
.user .btn {
font-size: 11px !important;
}
/* Users ends */
/*#endregion */
/*#region Override background color theme */
/*For Bootstrap 3*/
.nav,
.pagination,
.carousel,
.panel-title a {
cursor: pointer;
}
body {
background-color: #FFF;
}
.navbar-inverse {
background-color: #015A81;
}
.sidebar-widget form {
margin: 0em -1em;
}
.sidebar .navi > li > a {
background-color: #373737 !important;
}
.sidebar .navi li ul li a {
color: #fff;
}
.sidebar .navi li ul li a:hover {
color: #52b9e9;
}
.sidebar .navi li ul li a:disabled {
color: #999;
}
.navbar-inverse .btn-navbar {
background-color: #015A81;
}
.navbar-inverse .btn-navbar:hover {
background-color: #015A81;
}
.sidebar {
margin-top: -2px;
}
.sidebar .sidebar-inner {
background-color: #373737;
}
.sidebar-filler {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
background-color: #373737;
width: 230px;
}
/*#endregion */
/* #region Main Styles */
ul.image-group {
padding: 0 0 0 0;
margin: 0 0 0 0;
}
ul.image-group li {
list-style: none;
margin-bottom: 25px;
}
.ng-cloak {
display: none !important;
}
select > option {
color: black;
}
input.form-control,
select.form-control,
textarea.form-control {
/*width: 205px;*/
display: inline;
display: block;
width: 50%;
max-width: 30em;
}
input.form-control-wide,
select.form-control-wide,
textarea.form-control-wide {
/*width: 205px;*/
display: inline;
display: block;
width: 95%;
max-width: 70em;
}
.widget .padd {
/*margin-bottom: 0;*/
/*padding: 1em 0;*/
height: 12em;
}
.widget .padd.padd-tight {
padding: 6px;
}
.list-flow.list-flow-tight {
width: 90px;
}
.map {
height: 228px;
}
.btn > i {
margin-right: 8px;
}
.btn {
margin-right: 4px;
margin-left: 4px;
}
.btn.btn-notext > i {
margin-right: 0;
}
.btn-group {
margin: .2em;
}
small {
font-size: 14px;
}
.text-subtle {
color: #b7b7b7;
}
.page-title-subtle {
color: white;
}
.page-title {
color: #EEE;
margin-right: 12px;
}
.right {
clear: right;
float: right;
}
.widget-content .padd:hover {
cursor: pointer;
color: white;
background-color: #52b9e9;
}
.widget-content .padd:hover * {
color: white;
}
.list-flow {
margin: 6px;
float: left;
width: 110px;
height: 120px;
border-bottom: solid 0 transparent;
padding: 1.5% .5%;
}
.name-stack h5 {
text-align: center;
padding: 0;
margin: 0;
line-height: 18px !important;
}
.search-query {
margin: 2px auto 8px auto !important;
}
.fa-search {
color: #FFFFFF;
}
.form-search {
min-height: 2em;
}
.input-group[class*="col-"] {
width: 80%;
margin: 0 1.5em;
}
.user .user-pic {
display: block;
margin: auto;
}
.user .user-details {
margin-left: 100px;
margin-right: 10px;
}
.widget-content {
padding: 1em;
margin: 0;
}
.stacked {
float: none !important;
display: block;
margin: auto;
}
.navbar .navbar-brand {
/*background: url(../images/gg.png) no-repeat left top !important;*/
margin: 0 1em;
height: 45px;
}
.navbar .brand-title {
/*margin-left: 4em;*/
margin: 0 1em;
color: #FFFFFF;
}
.navbar-logo img {
height: 20px;
}
.today-datas li {
padding: 20px 14px;
height: 9em;
}
/*#region Splash */
#splash-page {
z-index: 99999 !important;
}
#splash-page .bar {
width: 100%;
}
.page-splash {
z-index: 99999 !important;
position: fixed !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #015A81;
opacity: .9;
pointer-events: auto;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
transition: opacity 0.3s linear;
}
.page-splash-message {
text-align: center;
margin: 20% auto 0 auto;
font-size: 400%;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
font-weight: normal;
-webkit-text-shadow: 2px 2px #000000;
text-shadow: 2px 2px #000000;
text-shadow: 2px 2px rgba(0, 0, 0, 0.15);
text-transform: uppercase;
text-decoration: none;
color: #F58A00;
padding: 0;
}
.page-splash-message.page-splash-message-subtle {
margin: 30% auto 0 auto;
font-size: 200%;
}
.flag-haschanges {
position: fixed !important;
display: inline;
}
.fa-asterisk.fa-asterisk-large {
font-size: 180%;
vertical-align: middle;
color: #F58A00;
}
.fa-asterisk.fa-asterisk-alert {
color: #F58A00;
}
.fa-asterisk-inline {
padding: 0 4px 0 0;
}
.progress,
.page-progress-bar {
margin: 30px 10% !important;
}
.ngplus-overlay-background {
top: 0px;
left: 0px;
padding-left: 100px;
position: absolute;
z-index: 10000;
height: 100%;
width: 100%;
background-color: #808080;
opacity: 0.2;
}
.ngplus-overlay-content {
position: absolute;
/*border: 1px solid #000;*/
/*background-color: #fff;*/
font-weight: bold;
height: 100px;
width: 300px;
height: 15em;
width: 20em;
z-index: 10000;
text-align: center;
}
.page-spinner-message {
text-align: center;
font-size: 400%;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
font-weight: normal;
-webkit-text-shadow: 2px 2px #000000;
text-shadow: 2px 2px #000000;
text-shadow: 2px 2px rgba(0, 0, 0, 0.15);
text-transform: uppercase;
text-decoration: none;
color: #F58A00;
padding: 0;
}
.page-spinner-message.page-spinner-message-subtle {
margin: 30% auto 0 auto;
font-size: 200%;
}
.overlay-message {
font-size: 200%;
}
.spinner {
margin: 20% auto 0 auto;
left: auto;
top: auto !important;
}
/*#endregion*/
table th > a {
font-weight: bold;
}
table th,
table td {
text-align: left;
vertical-align: middle;
}
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
cursor: pointer;
}
.widget-content.referrer {
border-width: 0;
min-height: 500px;
height: inherit;
}
a {
cursor: pointer;
}
/* #endregion */
.customer-name {
font-size: 1.2em;
}
.customer-thumb {
margin: 0.1em !important;
padding: 0.1em;
}
/*#region wrapper for angular ng-include and ng-view animations*/
.view-container {
position: relative;
overflow: hidden;
}
/*#endregion */
/*#region Angular ng-include, ng-view, ng-repeat shuffle animations*/
.shuffle-animation.ng-enter,
.shuffle-animation.ng-leave {
position: relative;
}
.shuffle-animation.ng-enter {
transition: ease-out all 0.3s 0.4s;
left: 2em;
opacity: 0;
}
.shuffle-animation.ng-enter.ng-enter-active {
left: 0;
opacity: 1;
}
.shuffle-animation.ng-leave {
transition: 0.3s ease-out all;
left: 0;
opacity: 1;
}
.shuffle-animation.ng-leave.ng-leave-active {
left: 2em;
opacity: 0;
}
/*#endregion*/
/*#region Angular ng-include, ng-view, ng-repeat fader animation */
.fader-animation.ng-enter,
.fader-animation.ng-leave,
.fader-animation.ng-move {
position: relative;
}
.fader-animation.ng-enter,
.fader-animation.ng-leave {
transition: cubic-bezier(0.25, 0.46, 0.45, 0.94) all 0.5s;
opacity: 1;
}
.fader-animation.ng-enter,
.fader-animation.ng-leave.ng-leave-active {
opacity: 0;
}
.fader-animation.ng-enter.ng-enter-active {
opacity: 1;
}
.fader-animation.ng-move {
opacity: 0.5;
}
.fader-animation.ng-move.ng-move-active {
opacity: 1;
}
/*#endregion*/
/*#region Angular ng-show dissolve animation */
.dissolve-animation.ng-hide-remove,
.dissolve-animation.ng-hide-add {
position: fixed !important;
display: inline !important;
transition: 0.5s linear all;
}
.dissolve-animation.ng-hide-remove.ng-hide-remove-active,
.dissolve-animation.ng-hide-add {
opacity: 1;
}
.dissolve-animation.ng-hide-add.ng-hide-add-active,
.dissolve-animation.ng-hide-remove {
opacity: 0;
}
/*#endregion */
/*#region toastr */
#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
margin: 4px auto;
}
/*#endregion */
/*#region Responsive */
@media (max-width: 979px) {
.sidebar-filler {
width: 200px;
}
.nav-collapse {
clear: none;
}
.nav-collapse .nav > li {
float: left;
}
.navbar .btn-navbar {
display: none;
}
.nav-collapse,
.nav-collapse.collapse {
height: inherit;
overflow: inherit;
}
.page-splash-message {
font-size: 300%;
}
.btn-group.pull-right {
float: none !important;
display: block;
}
}
@media (min-width: 768px) {
.sidebar .sidebar-inner {
display: block !important;
}
}
@media (max-width: 767px) {
.sidebar-filler {
display: none;
}
.nav-collapse {
clear: both;
}
.nav-collapse .nav > li {
float: none;
}
.navbar .btn-navbar {
display: block;
}
.nav-collapse,
.nav-collapse.collapse {
height: 0;
overflow: hidden;
}
.page-splash-message {
font-size: 200%;
margin: 40% auto 0 auto;
}
.page-splash-message.page-splash-message-subtle {
font-size: 150%;
}
.sidebar .sidebar-inner {
height: inherit;
}
}
@media (max-width: 480px) {
input.form-control,
select.form-control,
textarea.form-control {
width: 70%;
}
}
@media (max-width: 480px) {
input.form-control-wide,
select.form-control-wide,
textarea.form-control-wide {
width: 70%;
}
}
@media (max-width: 320px) {
.today-datas li {
padding: 1em .5em;
line-height: 1em;
}
.today-datas li i {
font-size: 2em;
}
.today-datas li .datas-text span {
font-size: 1em;
}
.btn {
margin: .2em;
width: 7em;
}
.btn-group > .btn {
display: block;
width: 7em;
}
.btn-group.pull-right {
margin: .2em 0;
}
input,
select {
width: 85% !important;
}
textarea {
width: 80%;
}
.img-thumbnail.user-pic {
width: 5em;
}
.user .user-details {
margin-left: 7em;
margin-right: .5em;
}
h3 {
font-size: 1.5em !important;
line-height: 1.2em !important;
}
}
/*#endregion */
angular.module('angularSlideable')
.component('slideable', {
restrict:'E',
// templateUrl: 'slideable.html',
template: 'Test: <input type="file" id="newFile" eg-files="model.files" has-file="model.hasFile" />',
controller: SlideableController,
compile: function (element, attr) {
// wrap tag
var contents = element.html();
element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');
return function postLink(scope, element, attrs) {
// default properties
attrs.duration = (!attrs.duration) ? '500ms' : attrs.duration;
attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
element.css({
'overflow': 'hidden',
//'height': '0px',
'width' : '0px',
// 'transitionProperty': 'height',
'transitionProperty': 'width',
'transitionDuration': attrs.duration,
'transitionTimingFunction': attrs.easing
});
};
}
});
function SlideableController() {
var vm = this;
vm.message = 'Hi from home';
// vm.message = <p>Hi Hello fjeifjewoif feiow fei jfeiowjf eoiwj feiowjeoj Qui aesthetic butcher, cardigan ex scenester Neutra American Apparel mumblecore.</p>
// <p>Ethical adipisicing before they sold out, sriracha Thundercats cardigan dolor deep v placeat. Flannel tattooed meggings direct trade banh mi tousled sriracha. Portland VHS ut dreamcatcher. Butcher eu irony, Banksy leggings eiusmod Pinterest hashtag Etsy asymmetrical lo-fi Helvetica quis incididunt adipisicing. YOLO cliche minim mlkshk dreamcatcher excepteur, Austin McSweeney's.</p>
// <p>Coded @ Kinfolk Studios in Williamsburg, Brooklyn, 2013.</p>
};
angular.module('angularSlideable')
.directive('slideToggle', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var target = document.querySelector(attrs.slideToggle);
attrs.expanded = false;
element.bind('click', function() {
var content = target.querySelector('.slideable_content');
if(!attrs.expanded) {
content.style.border = '1px solid rgba(0,0,0,0)';
var y = content.clientHeight;
var x = content.clientWidth;
content.style.border = 0;
target.style.height = y + 'px';
// target.style.width = x + 'px'
target.style.width = '600px';
} else {
// target.style.height = '0px';
target.style.width = '0px';
}
attrs.expanded = !attrs.expanded;
});
}
}
})
//angular.module('angularSlideable')
// .component('slideToggle', {
// // require the parent component
// // In this case parent is an instance of slider component
// require: {
// 'parent' : '^slideable'
// },
// // template: '<!---accrodion-panel-template-->',
// controller: SlideableController
// restrict: 'A',
// link: function(scope, element, attrs) {
// var target = document.querySelector(attrs.slideToggle);
// attrs.expanded = false;
// element.bind('click', function() {
// var content = target.querySelector('.slideable_content');
// if(!attrs.expanded) {
// content.style.border = '1px solid rgba(0,0,0,0)';
// var y = content.clientHeight;
// var x = content.clientWidth;
// content.style.border = 0;
// target.style.height = y + 'px';
// // target.style.width = x + 'px'
// target.style.width = '600px';
// } else {
// // target.style.height = '0px';
// target.style.width = '0px';
// }
// attrs.expanded = !attrs.expanded;
// });
// }
// }
// function TogglePanelController () {
// // use parents methods here
// // var self = this;
// // // add panel
// // self.parent.addPanel(self);
// // // select panel
// // self.parent.selectPanel(self);
// }
<p>Hi Hello fjeifjewoif feiow fei jfeiowjf eoiwj feiowjeoj Qui aesthetic butcher, cardigan ex scenester Neutra American Apparel mumblecore.</p>
<p>Ethical adipisicing before they sold out, sriracha Thundercats cardigan dolor deep v placeat. Flannel tattooed meggings direct trade banh mi tousled sriracha. Portland VHS ut dreamcatcher. Butcher eu irony, Banksy leggings eiusmod Pinterest hashtag Etsy asymmetrical lo-fi Helvetica quis incididunt adipisicing. YOLO cliche minim mlkshk dreamcatcher excepteur, Austin McSweeney's.</p>
<p>Coded @ Kinfolk Studios in Williamsburg, Brooklyn, 2013.</p>