<!DOCTYPE html>
<html>
<head>
<link href="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/overlayscrollbars@1.4.5/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/fixed-header-table@1.3.0/css/defaultTheme.min.css"/>
<link rel="stylesheet" href="lib/style.css" />
<link rel="stylesheet" href="lib/additional_style.css" />
<script src="//cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.14/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.14/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.14/angular-sanitize.js"></script>
<script src="//cdn.jsdelivr.net/npm/angular-ui-bootstrap@2.5.6/dist/ui-bootstrap-tpls.js"></script>
<script src="//cdn.jsdelivr.net/npm/element-resize-detector@1.1.14/dist/element-resize-detector.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/overlayscrollbars@1.4.5/js/OverlayScrollbars.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/fixed-header-table@1.3.0/jquery.fixedheadertable.min.js"></script>
<script src="lib/script.js"></script>
</head>
<body ng-app="angularjs.hospitalizationform"
ng-controller="MainCtrl">
<div class="app-container">
<div class="view-container container-fluid">
<ng-view class="app-view">
<ng-include src="'fiche.html'"></ng-include>
</ng-view>
</div>
</div>
</body>
</html>
var app = angular.module('angularjs.hospitalizationform',
['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
app.factory(
'elementResizeDetectionService',
function () {
return elementResizeDetectorMaker({
strategy: "scroll" // For ultra fast performance.
});
}
);
app.directive(
'sortableTableHeader',
function ($log) {
var log = $log;
return {
restrict: 'A',
transclude: true,
scope: true,
require: '^fixedHeaderTable',
template: '<div class="horizontal-flex-container">' +
'<span ng-transclude></span>' +
'<span class="vertical-flex-container-center fa fa-fw" ' +
'ng-class="{\'0\':\'fa-caret-down sort-indicator show-dimmed-on-hover\', \'1\':\'fa-caret-down sort-indicator\', \'-1\':\'fa-caret-up sort-indicator\'}[orderedBy()]"></span></div>',
// 'ng-class="{\'fa-caret-down\':orderedBy() > 0, ' +
// '\'fa-caret-up\':orderedBy() < 0, \'sort-indicator\':orderedBy() !== 0}"></span></div>',
link: function (scope, element, attrs, tableController) {
log.debug('directive sortableTableHeader link:',
scope, element, attrs, tableController);
element.addClass('sortable clickable');
element.on('click', toggleSort);
// Get sort order for given cell
scope.orderedBy = function () {
return tableController.orderedBy(
element.attr('cell-id'),
element.attr('row-index'),
element.attr('column-index')
);
};
// Toggle sort order for given cell
function toggleSort($event) {
// $event.stopPropagation();
// $event.preventDefault();
// For unknown reasons, 'attrs' does not contain
// all element's attributes, so resort to using
// 'element.attr()'.
log.debug('directive sortableTableHeader link toggleSort:',
element.attr('row-index'),
element.attr('column-index'),
element.attr('cell-id'),
attrs, $event
);
tableController.toggleSort(
element.attr('cell-id'),
element.attr('row-index'),
element.attr('column-index')
);
}
}
};
}
);
app.directive(
'fixedHeaderTable',
function ($timeout, $log, elementResizeDetectionService) {
var log = $log;
// TODO: Implement all possible fht options (as separate attributes and/or an options-object attribute)
// TODO: Implement a provider for application default options
// plugin's default options
var defaultFhtOptions = {
width: '100%',
height: '100%',
themeClass: 'fht-default',
borderCollapse: true,
fixedColumns: 0, // fixed first columns
fixedColumn: false, // For backward-compatibility
sortable: false, // NOT IMPLEMENTED!!!
autoShow: true, // hide table after its created
footer: false, // show footer
cloneHeadToFoot: false, // clone head and use as footer
autoResize: false, // resize table if its parent wrapper changes size
create: null // callback after plugin completes
};
function forEachTableHeaderCell(fhtElement, callbackFn) {
angular.forEach(fhtElement[0].querySelectorAll('thead tr'),
// Rows in table-header
function (row, rowIndex, arr) {
angular.forEach(row.querySelectorAll('th'),
// Columns/cells in table-header row
function (col, colIndex, arr) {
callbackFn(col, rowIndex, colIndex);
}
);
}
);
}
return {
restrict: 'A',
// TODO: AngularJS 1.5 use '<' i.s.o. '=' see http://blog.krawaller.se/posts/dissecting-bindings-in-angularjs/
scope: {
headerData: '=',
tableData: '=',
tableColumns: '=',
orderedBy: '=',
doSort: '='
},
controller: function ($scope, $element, $attrs) {
var self = this;
var multiSort = false;
function applySortOrder() {
setSortOrders();
$scope.doSort();
}
function setSortOrders() {
forEachTableHeaderCell(
angular.element($scope.fhtHeadTable),
function (cell, rowIndex, colIndex) {
var cellId = angular.element(cell)
.attr('cell-id');
var sortOrder = $scope.orderedBy
.indexOf(cellId) + 1;
if (sortOrder === 0)
sortOrder = $scope.orderedBy
.indexOf('-' + cellId) + 1;
log.debug(
'directive fixedHeaderTable controller:',
'set sort-order for header cel #' +
rowIndex + '.' + colIndex, cellId + ':',
sortOrder);
// If no sort-order (i.e. = 0) then remove
// else set the custom property.
cell.style.setProperty('--sort-order',
sortOrder ? '\'' + sortOrder + '\'' : undefined);
}
);
}
function applyMultiSort() {
// If single-sort, remove all but the first element
if (!multiSort && $scope.orderedBy.length > 1) {
$scope.orderedBy.splice(1);
applySortOrder();
}
var fhtHeadTableHead = angular.element(
$scope.fhtHeadTable.querySelector('thead'));
if (multiSort) {
fhtHeadTableHead.addClass('multi-sort');
// No need for resorting only setting the
} else {
fhtHeadTableHead.removeClass('multi-sort');
}
}
/** Sort-API for the sortableTableHeader child directives
*
*/
// Get sort order for given header cell
this.orderedBy = function (cellId, rowIndex, colIndex) {
// Ascending sort order
if ($scope.orderedBy.indexOf(cellId) !== -1)
return 1;
// Descending sort order
if ($scope.orderedBy.indexOf('-' + cellId) !== -1)
return -1;
// No sort order
return 0;
};
// Get/set the multi-sort boolean
this.multiSort = function (value) {
if (angular.isDefined(value)) {
multiSort = !!value;
applyMultiSort();
}
return multiSort;
};
// Toggle the multi-sort boolean
this.toggleMultiSort = function () {
multiSort = !multiSort;
applyMultiSort();
return multiSort;
};
// Toggle sort order for given header cell
this.toggleSort = function (cellId, rowIndex, colIndex) {
var orderedBy = self.orderedBy(cellId, rowIndex, colIndex);
var multiSort = self.multiSort();
// For single-sort, there can be only one header cell
// being sorted on. The cell sort-order is:
// initially none (0) > asc (1) > desc (-1) > asc (1) ...
// For multi-sort, there can be multiple header cells
// being sorted on. The cell sort-order is:
// initially none (0) > asc (1) > desc (-1) > none (0) ...
if (orderedBy === 0) {
// New cell
if (multiSort) {
// Add new ascending cell
$scope.orderedBy.push(cellId);
} else {
// Set new ascending cell (replacing existing cell)
$scope.orderedBy[0] = cellId;
}
} else if (orderedBy === 1) {
// Change existing ascending cell to descending cell
$scope.orderedBy[$scope.orderedBy
.indexOf(cellId)] = '-' + cellId;
} else if (orderedBy === -1) {
// Existing descending cell
if (multiSort) {
// Remove existing descending cell
$scope.orderedBy.splice($scope.orderedBy
.indexOf('-' + cellId), 1);
} else {
// Change existing descending cell to ascending cell
$scope.orderedBy[$scope.orderedBy
.indexOf('-' + cellId)] = cellId;
}
}
applySortOrder();
};
},
compile: function (tElement, tAttrs) {
// Before the linking phase i.e. before applying the
// 'fixed-header-table' directive which will clone the table,
// add the 'sortable-table-header' directive to the table-header
// cells.
function applySortability(cell, rowIndex, colIndex) {
angular.element(cell).on('click',
function ($event) {
$event.stopPropagation();
$event.preventDefault();
}
);
if (!cell.attributes
.hasOwnProperty('sort-disabled')) {
log.debug('directive fixedHeaderTable compile:',
'add sortableTableHeader directive to header' +
'cel #' + rowIndex + '.' + colIndex + ':', cell);
angular.element(cell).attr('sortable-table-header', '');
}
}
if (angular.isDefined(tAttrs.sortableTable))
forEachTableHeaderCell(tElement, applySortability);
if (angular.isDefined(tAttrs.tableLayoutFixed))
tElement.addClass('table-layout-fixed');
return {
pre: function (scope, element, attrs) {
log.debug('directive fixedHeaderTable pre-link:',
scope, element, attrs);
// In the early linking phase (with scope binding),
// add the attributes to the table-header cells for
// the 'sortable-table-header' directive.
function applySortability(cell, rowIndex, colIndex) {
log.debug('directive fixedHeaderTable pre-link:',
'add attributes for sortableTableHeader ' +
'directive to header cel #' +
rowIndex + '.' + colIndex + ':', cell);
angular.element(cell).attr({
'row-index': rowIndex,
'column-index': colIndex,
'cell-id': scope
.tableColumns[rowIndex][colIndex]
});
}
if (angular.isDefined(attrs.sortableTable))
forEachTableHeaderCell(element, applySortability);
},
post: function (scope, element, attrs, tableController) {
log.debug('directive fixedHeaderTable link:',
scope, element, attrs);
// TODO: syncColWidthDebounceTime as system fine-tuning preference
var syncColWidthDebounceTime = 100;
var options = {
footer: false,
cloneHeadToFoot: false,
autoResize: true
};
var fhtParent = element[0].parentElement;
// for (var i = 0, l = osbOptions.length; i < l; i++) {
// var opt = osbOptions[i];
//
// if (attrs[opt] !== undefined) {
// options[opt] = $parse(attrs[opt])();
// }
// }
// Apply the directive (jQuery plugin) which will clone
// the fixed-header-table and wrap both the cloned and
// original table in a head-container (with class
// 'fht-thead') and body-container (with class
// 'fht-tbody') respectively. Again both the head- and
// body-container are wrapped in a table-container
// (with class 'fht-table-wrapper'). If specified, a
// foot-container (with class 'fht-tfoot') is created,
// similar to the head-container.
$(element[0]).fixedHeaderTable(options);
var fhtHead = fhtParent.querySelector('.fht-thead');
var fhtBody = fhtParent.querySelector('.fht-tbody');
var fhtFoot = fhtParent.querySelector('.fht-tfoot');
angular.element(fhtBody).addClass('app-content-body');
// Instead of compiling the cloned table header, just
// swap the compiled original table header with the
// uncompiled cloned table header. Compiling i.e.
// $compile(fhtHead)(scope), works well in most cases,
// but not in this case with a body-appended drop-down
// menu.
scope.fhtHeadTable = fhtHead.querySelector('table');
var clonedHead = scope.fhtHeadTable.querySelector('thead');
scope.fhtBodyTable = fhtBody.querySelector('table');
var originalHead = scope.fhtBodyTable.querySelector('thead');
// scope.fhtHeadTable.appendChild(originalHead);
// scope.fhtBodyTable.appendChild(clonedHead);
// scope.fhtBodyTable.replaceChild(clonedHead, originalHead);
// scope.fhtHeadTable.appendChild(originalHead);
angular.element(scope.fhtHeadTable).prepend(originalHead);
angular.element(scope.fhtBodyTable).prepend(clonedHead);
function toggleMultiSort() {
log.debug('directive fixedHeaderTable link,',
'sortableTable toggleMultiSort:',
tableController.multiSort());
tableController.toggleMultiSort();
}
// Add support for the multi-sort toggle button
if (angular.isDefined(attrs.sortableTable)) {
// Add a class to add the multi-sort toggle button
// pseudo-element and to disabled pointer-events on
// the table-head, but not it's children (see CSS).
angular.element(originalHead)
.addClass('multi-sort-enabled');
// Add the click-handler to the parent of the
// pseudo-element.
// When clicking the parent of the pseudo-element,
// but not one of it's children (who prevent
// bubling), then it must be the pseudo-element.
angular.element(originalHead)
.on('click', toggleMultiSort);
// Keep track of hovering any child, to disable the
// multi-sort toggle button hover-style (see CSS).
// When hovering the parent of the pseudo-element,
// but not one of it's children, then it must be
// the pseudo-element.
angular.element(originalHead).children()
.on('mouseenter', function () {
angular.element(originalHead)
.addClass('child-hover');
});
angular.element(originalHead).children()
.on('mouseleave', function () {
angular.element(originalHead)
.removeClass('child-hover');
});
}
// Horizontal scrolling of a fixed-header-table with
// overlay-scrollbars is not working properly. Due to
// the changed scrollable container, the position of
// the fixed-header is not being updated when scrolling.
// Fix it by listening to scroll-events on the new
// scrollable viewport container and update the margin
// of the fixed-header accordingly.
// TODO: Only apply fix when 'overlay-scrollbars' are applied to a 'fixed-header-table'
// TODO: Consider to move the fix to the 'overlay-scrollbars' directive (more appropriate ?!?)
scope.$evalAsync(function () {
var scrollableViewport = angular.element(
fhtBody.querySelector('.os-viewport'));
scrollableViewport.on('scroll', function (event) {
log.debug('directive fixedHeaderTable link: ' +
'overlayScrollbar viewport on scroll:',
event, 'scrollTop scrollLeft:',
scrollableViewport[0].scrollTop,
scrollableViewport[0].scrollLeft,
'(table header marginLeft:',
angular.element(scope.fhtHeadTable)
.css('marginLeft'), ')'
);
angular.element(scope.fhtHeadTable).css({
marginLeft: -scrollableViewport[0]
.scrollLeft + 'px'
});
});
});
// Unfortunately, the jQuery plugin does not include
// synchronization of the column-widths from the
// invisible table-header in the body-container to the
// visible table-header in the head-container. The
// following 2 approaches are implemented to
// synchronize the column-widths:
//
// 1. Early change detection
// A watch is used on the data model, if specified
// on the directive. This will detect table changes,
// before DOM-manipulation and rendering.
// Synchronization of the col-widths will be delayed
// until DOM-manipulation has finished, but before
// rendering, using $evalAsync. Renders perfectly,
// but will not detect all relevant changes.
//
// 2. Late change detection
// Resize-sensors are used to detect col-width
// changes after rendering. Detects all relevant
// changes, but header col-width updates are
// visible.
//
// To prevent the head-container from influencing the
// total table width, the head-container width will be
// frozen to the current value while syncing the
// col-widths. Afterwards, the head-container width
// will be unset again.
//
// Due to the use of multiple sensors, a debounce
// approach is used to freeze and release the
// head-container width.
// Rows in visible head-container
var fhtHeadRows = fhtHead.querySelectorAll('thead tr');
// Rows in optional visible foot-container
var fhtFootRows;
if (options.footer && options.cloneHeadToFoot)
fhtFootRows = fhtFoot.querySelectorAll('thead tr');
var syncColWidthDebounceTimer;
function freezeHeadContainerWidth() {
log.debug('directive fixedHeaderTable link,',
'elementResizeDetectionService:',
'freeze head-container width',
getComputedStyle(fhtHead).width,
' -> ',
getComputedStyle(fhtBody).width,
fhtBody.clientWidth
);
angular.element(fhtHead).css({
width: fhtBody.clientWidth
});
if (options.footer && options.cloneHeadToFoot)
angular.element(fhtFoot).css({
width: fhtBody.clientWidth
});
}
function releaseHeadContainerWidth() {
log.debug('directive fixedHeaderTable link,',
'syncColWidthDebounceTimer time-out');
angular.element(fhtHead).css({
width: ''
});
if (options.footer && options.cloneHeadToFoot)
angular.element(fhtFoot).css({
width: ''
});
}
function startSyncColWidthDebounceTimer() {
stopSyncColWidthDebounceTimer();
syncColWidthDebounceTimer = $timeout(
function () {
syncColWidthDebounceTimer = undefined;
releaseHeadContainerWidth();
}, syncColWidthDebounceTime);
}
function stopSyncColWidthDebounceTimer() {
if (syncColWidthDebounceTimer) {
$timeout.cancel(syncColWidthDebounceTimer);
syncColWidthDebounceTimer = undefined;
}
}
function forEachTableHeaderCell(callbackFn) {
angular.forEach(element[0]
.querySelectorAll('thead tr'),
// Rows in invisible body-container
function (row, rowIndex, arr) {
// Columns/cells in visible
// head-container row
var fhtHeadRowCols = fhtHeadRows[rowIndex]
.querySelectorAll('th');
// Columns/cells in optional visible
// foot-container row
var fhtFootRowCols;
if (options.footer &&
options.cloneHeadToFoot)
fhtFootRowCols = fhtFootRows[rowIndex]
.querySelectorAll('th');
angular.forEach(row.querySelectorAll('th'),
// Columns/cells in invisible
// body-container row
function (col, colIndex, arr) {
// callback(srcCell,
// dstHeadCell, dstFootCell
// rowIndex, colIndex)
callbackFn(
col, fhtHeadRowCols[colIndex],
fhtFootRowCols ?
fhtFootRowCols[colIndex] :
null,
rowIndex, colIndex);
}
);
}
);
}
function syncColWidth(srcCell, dstHeadCell, dstFootCell,
rowIndex, colIndex, detector) {
log.debug(
'directive fixedHeaderTable link,', detector +
', cel #' + rowIndex + '.' + colIndex + ':',
getComputedStyle(dstHeadCell).width, '->',
getComputedStyle(srcCell).width,
srcCell.clientWidth
);
// Sync the column width
angular.element(dstHeadCell).css({
width: srcCell.clientWidth,
minWidth: srcCell.clientWidth,
maxWidth: srcCell.clientWidth
});
if (dstFootCell)
angular.element(dstFootCell).css({
width: srcCell.clientWidth,
minWidth: srcCell.clientWidth,
maxWidth: srcCell.clientWidth
});
}
// If header data is changed, update the invisible
// table header by synchronizing it with the visible
// table header.
if (angular.isDefined(attrs.headerData)) {
scope.$watch('headerData',
function (newValue, oldValue) {
// Delay cloning of the table header
scope.$evalAsync(function () {
var originalHead = scope.fhtHeadTable
.querySelector('thead');
log.debug(
'directive fixedHeaderTable link,',
'$watch headerData:',
scope.headerData, originalHead
);
// TODO: What if there are existing cells that e.g. have a resize-sonsor ???
angular.element(
scope.fhtBodyTable
.querySelector('thead')
).replaceWith(
angular.element(originalHead)
.clone()
);
});
}, true); // Deep watch
}
if (!angular.isDefined(attrs.tableLayoutFixed)) {
// Early change detection using a watch
if (angular.isDefined(attrs.tableData)) {
scope.$watch('tableData',
function (newValue, oldValue) {
// Delay synchronization of the
// col-widths
scope.$evalAsync(function () {
freezeHeadContainerWidth();
forEachTableHeaderCell(
function (srcCell,
dstHeadCell,
dstFootCell,
rowIndex, colIndex) {
syncColWidth(srcCell,
dstHeadCell,
dstFootCell,
rowIndex, colIndex,
'$watch tableData');
}
);
if (!syncColWidthDebounceTimer)
releaseHeadContainerWidth();
});
}, true); // Deep watch
}
// Late change detection using resize-sensors
forEachTableHeaderCell(
function (srcCell, dstHeadCell, dstFootCell,
rowIndex, colIndex) {
// Activate the resize-sensor
elementResizeDetectionService
.listenTo(srcCell,
function () {
stopSyncColWidthDebounceTimer();
freezeHeadContainerWidth();
syncColWidth(srcCell,
dstHeadCell, dstFootCell,
rowIndex, colIndex,
'elementResize' +
'DetectionService');
startSyncColWidthDebounceTimer();
}
);
log.debug(
'directive fixedHeaderTable link,',
'elementResizeDetectionService ' +
'activated on:', srcCell
);
}
);
}
scope.$on('$destroy', function () {
// Disable listeners and watchers not bound to
// current scope (e.g. bound to $rootScope)
// Cancel intervals and timeouts
stopSyncColWidthDebounceTimer();
// Nullify DOM-element references
});
element.on('$destroy', function () {
// Note: This is a jQuery event. Respectful jQuery
// plugins have $destroy handlers, that is the
// reason why this event is emitted...
// Follow the standards.
// Clean up all vanilla JavaScript / jQuery
// artifacts (dodgy jQuery plugins, e.g. those that
// don’t have handlers reacting to the JavaScript
// $destroy event).
$(element[0]).fixedHeaderTable('destroy');
});
}
};
}
};
}
);
app.directive(
'overlayScrollbar',
function ($log) {
var log = $log;
// TODO: Implement all possible os options (as separate attributes and/or an options-object attribute)
// TODO: Implement a provider for application default options
// plugin's default options
var defaultOsbOptions = {
className: "os-theme-dark",
resize: "none",
sizeAutoCapable: true,
clipAlways: true,
normalizeRTL: true,
paddingAbsolute: false,
autoUpdate: null,
autoUpdateInterval: 33,
nativeScrollbarsOverlaid: {
showNativeScrollbars: false,
initialize: true
},
overflowBehavior: {
x: "scroll",
y: "scroll"
},
scrollbars: {
visibility: "auto",
autoHide: "never",
autoHideDelay: 800,
dragScrolling: true,
clickScrolling: false,
touchSupport: true
},
textarea: {
dynWidth: false,
dynHeight: false
},
callbacks: {
onInitialized: null,
onInitializationWithdrawn: null,
onDestroyed: null,
onScrollStart: null,
onScroll: null,
onScrollStop: null,
onOverflowChanged: null,
onOverflowAmountChanged: null,
onDirectionChanged: null,
onContentSizeChanged: null,
onHostSizeChanged: null,
onUpdated: null
}
};
var osbOptions = {};
return {
restrict: 'A',
link: function (scope, element, attrs) {
log.debug('directive overlayScrollbar link:',
scope, element, attrs);
var options = {
className: "os-theme-app-default",
scrollbars: {
clickScrolling: true
}
};
var osb;
// for (var i = 0, l = osbOptions.length; i < l; i++) {
// var opt = osbOptions[i];
//
// if (attrs[opt] !== undefined) {
// options[opt] = $parse(attrs[opt])();
// }
// }
// if (element[0].nodeName !== 'SCROLLABLE-TABLE')
if (element[0].nodeName === 'TABLE' &&
attrs.hasOwnProperty('fixedHeaderTable')) {
// For a fixed-header-table, apply the overlay-scrollbars
// to the scrollable container i.e. the parent-element.
// Delay it with '$evalAsync' to assure it will be applied
// to the correct (original) container (class='fht-tbody'),
// after the fixed-header-table has been cloned and both
// have been wrapped in a container with
// class='fht-thead' (the cloned one) and
// class='fht-tbody' (the original one) respectively.
// Unfortunately, the table-width is incorrect after both
// the 'fixed-header-table' and the 'overlay-scrollbar'
// directives have been applied (not taking the space of
// the moved native scrollbar into account). Setting the
// width to 100% solves the problem (see CSS file,
// .fht-table-init class-rule).
scope.$evalAsync(function () {
osb = OverlayScrollbars(
element[0].parentElement, options);
});
} else {
osb = OverlayScrollbars(element[0], options);
}
scope.$on('$destroy', function () {
// Disable listeners and watchers not bound to current
// scope (e.g. bound to $rootScope)
// Cancel intervals and timeouts
// Nullify DOM-element references
});
element.on('$destroy', function () {
// Note: This is a jQuery event. Respectful jQuery plugins
// have $destroy handlers, that is the reason why this
// event is emitted... Follow the standards.
// Clean up all vanilla JavaScript / jQuery artifacts
// (dodgy jQuery plugins, e.g. those that don’t have
// handlers reacting to the JavaScript $destroy event).
osb.destroy();
});
}
};
}
);
app.controller('MainCtrl', function($scope) {
$scope.guest = {
"id": 2168,
"uuid": "3554d780-c200-11e6-9892-d346b6a39a5c",
"external_ref": null,
"entrance": "2016-12-13T23:00:00.000Z",
"animal": 816,
"quantity": 1,
"cage": 66,
"exit": null,
"exit_reason": null,
"staff_only": 0,
"dangerous": 0,
"medication": null,
"comment": null,
"for_adoption": 0,
"adoption_from": null,
"origin": null,
"id_number": "K 011 77 A 5022",
"given_name": null,
"date_of_birth": null,
"exit_comment": null,
"just_comment": "IBN 13/12 6320 17/5",
"reserved": 0,
"menu_percentage": 100,
"reserved_for": null,
"male_quantity": 0,
"female_quantity": 0,
"entrance_reason": 0,
"domain": 4,
"origin_country": "--",
"contact": null,
"animal_name": "Steller zeearend",
"cage_name": "VK 8",
"color": "rgb(204, 0, 0)",
"unspecifiedSexQuantity": 1
};
$scope.guestWeightMeasurements = [
{
"id": 73,
"hospitalization": 2168,
"grams": 6800,
"date": "2017-02-07T23:00:00.000Z"
},
{
"id": 74,
"hospitalization": 2168,
"grams": 6750,
"date": "2017-03-05T23:00:00.000Z"
},
{
"id": 73,
"hospitalization": 2168,
"grams": 6800,
"date": "2017-04-07T23:00:00.000Z"
},
{
"id": 74,
"hospitalization": 2168,
"grams": 6750,
"date": "2017-05-05T23:00:00.000Z"
},
{
"id": 73,
"hospitalization": 2168,
"grams": 6800,
"date": "2017-06-07T23:00:00.000Z"
},
{
"id": 74,
"hospitalization": 2168,
"grams": 6750,
"date": "2017-07-05T23:00:00.000Z"
},
{
"id": 73,
"hospitalization": 2168,
"grams": 6800,
"date": "2017-08-07T23:00:00.000Z"
},
{
"id": 74,
"hospitalization": 2168,
"grams": 6750,
"date": "2017-09-05T23:00:00.000Z"
},
{
"id": 74,
"hospitalization": 2168,
"grams": 6750,
"date": "2017-10-05T23:00:00.000Z"
},
{
"id": 73,
"hospitalization": 2168,
"grams": 6800,
"date": "2017-11-07T23:00:00.000Z"
},
{
"id": 74,
"hospitalization": 2168,
"grams": 6750,
"date": "2017-12-05T23:00:00.000Z"
},
];
$scope.domains = [
{
"id": 0,
"name": "Vertrokken",
"standard": 1,
"$$hashKey": "object:2268"
},
{
"id": 1,
"name": "Binnengekomen",
"standard": 1,
"$$hashKey": "object:2261"
},
{
"id": 2,
"name": "IC",
"standard": 0,
"$$hashKey": "object:2264"
},
{
"id": 3,
"name": "Quarantaine",
"standard": 0,
"$$hashKey": "object:2266"
},
{
"id": 4,
"name": "Nazorg",
"standard": 0,
"$$hashKey": "object:2265"
}
];
$scope.cages = [
{
"id": 36,
"route": 1,
"name": "B 1",
"board_position": 3,
"lights_on": 1,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2109"
},
{
"id": 37,
"route": 1,
"name": "B 2",
"board_position": 9,
"lights_on": 1,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2118"
},
{
"id": 38,
"route": 1,
"name": "B 3",
"board_position": 15,
"lights_on": 1,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2119"
},
{
"id": 39,
"route": 1,
"name": "B 4",
"board_position": 18,
"lights_on": 1,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2120"
},
{
"id": 40,
"route": 1,
"name": "B 5",
"board_position": 21,
"lights_on": 0,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2121"
},
{
"id": 41,
"route": 1,
"name": "B 6",
"board_position": 24,
"lights_on": 0,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2122"
},
{
"id": 42,
"route": 1,
"name": "B 7",
"board_position": 27,
"lights_on": 0,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2123"
},
{
"id": 43,
"route": 1,
"name": "B 8",
"board_position": 30,
"lights_on": 0,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2124"
},
{
"id": 57,
"route": 1,
"name": "REN 1",
"board_position": 72,
"lights_on": 0,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2211"
},
{
"id": 58,
"route": 1,
"name": "REN 2",
"board_position": 78,
"lights_on": 0,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2188"
},
{
"id": 59,
"route": 1,
"name": "VK 1",
"board_position": 81,
"lights_on": 0,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2236"
},
{
"id": 60,
"route": 1,
"name": "VK 2",
"board_position": 84,
"lights_on": 0,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2241"
},
{
"id": 61,
"route": 1,
"name": "VK 3",
"board_position": 87,
"lights_on": 0,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2242"
},
{
"id": 62,
"route": 1,
"name": "VK 4",
"board_position": 90,
"lights_on": 0,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2243"
},
{
"id": 63,
"route": 1,
"name": "VK 5-6",
"board_position": 93,
"lights_on": 0,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2244"
},
{
"id": 65,
"route": 1,
"name": "VK 7",
"board_position": 96,
"lights_on": 0,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2245"
},
{
"id": 66,
"route": 1,
"name": "VK 8",
"board_position": 99,
"lights_on": 0,
"to_clean": 0,
"domain": 4,
"route_name": "Buiten",
"color": "rgb(204, 0, 0)",
"$$hashKey": "object:2246"
}
]
$scope.weightTableColumns = [['date', 'grams', 'action']];
$scope.dateFormat = 'dd-MM-yyyy';
$scope.datePickerExitDisabled = true;
$scope.exitReasonDisabled = true;
$scope.domainDisabled = true;
$scope.showIDs = true;
$scope.showExit = true;
$scope.datePickerEntranceDisabled = true;
$scope.quantityDisabled = true;
$scope.guest.unspecifiedSexQuantity =
$scope.guest.quantity -
$scope.guest.male_quantity -
$scope.guest.female_quantity;
});
:root {
--main-bg-color-r: 88;
--main-bg-color-g: 160;
--main-bg-color-b: 160;
--main-bg-color: rgb(var(--main-bg-color-r), var(--main-bg-color-g), var(--main-bg-color-b));
--off-white-r: 255;
--off-white-g: 255;
--off-white-b: 231;
--off-white: rgb(var(--off-white-r), var(--off-white-g), var(--off-white-b));
--off-black-r: 64;
--off-black-g: 32;
--off-black-b: 32;
--off-black: rgb(var(--off-black-r), var(--off-black-g), var(--off-black-b));
--soft-yellow-r: 255;
--soft-yellow-g: 255;
--soft-yellow-b: 127;
--soft-yellow: rgb(var(--soft-yellow-r), var(--soft-yellow-g), var(--soft-yellow-b));
--soft-green-r: 208;
--soft-green-g: 255;
--soft-green-b: 192;
--soft-green: rgb(var(--soft-green-r), var(--soft-green-g), var(--soft-green-b));
--soft-red-r: 255;
--soft-red-g: 192;
--soft-red-b: 160;
--soft-red: rgb(var(--soft-red-r), var(--soft-red-g), var(--soft-red-b));
--button-bg-color-r: 181;
--button-bg-color-g: 116;
--button-bg-color-b: 35;
--button-bg-color: rgb(var(--button-bg-color-r), var(--button-bg-color-g), var(--button-bg-color-b));
--input-bg-color-r: 181;
--input-bg-color-g: 116;
--input-bg-color-b: 35;
--input-bg-color: rgb(var(--input-bg-color-r), var(--input-bg-color-g), var(--input-bg-color-b));
--padding: 2px;
--border-width: 1px;
--actionbar-height: 128px;
--cage-remark-color: #c0392b;
--text-shadow-light: .1em .1em .2em #ffffff;
--text-shadow-dark: .1em .1em .2em #000000;
--toolbar-height: 32px;
--scale: 1;
}
body {
width: 100vw;
height: 100vh;
/*padding-bottom: 128px;*/
/*overflow: auto;*/
opacity: .99999; /* For z-index purposes */
}
body::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../images/NHC-medium.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 360px 360px;
opacity: .25;
z-index: -1;
}
.app-container {
width: 100%;
height: 100%;
}
.view-container {
width: 100%;
height: calc(100% - var(--actionbar-height));
overflow: auto;
display: flex;
flex-direction: column;
}
.app-view {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.fht-table-wrapper,
.app-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.app-content-horizontal {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.fht-table-wrapper {
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, .15);
}
.app-content-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
/* .os-content-glue { */
/* height: 100% !important; */
/* height: -webkit-fill-available !important; */
/* height: -moz-available !important; */
/* height: fill-available !important; */
}
/* .fht-table-wrapper .fht-fixed-body .fht-tbody, */
/* .fht-table-wrapper .fht-tbody { */
/*height: auto !important;*/
/* height: -webkit-max-content !important; */
/* height: -moz-max-content !important; */
/* height: max-content !important; */
/* } */
/* .fht-table-init { */
/* width: 100% !important; */
/* } */
/*******************************************************************************
* Multi-sort toggle button
*/
/* Default multi-sort ordering number (above sort-indicator)
*/
.fht-thead .table > thead {
--sort-order: '';
}
/* Disable pointer-events on the table-header in order to support proper
* detection of 'hover' and 'click' on the multi-sort toggle button
* pseudo-element.
*/
.fht-thead .table > thead.multi-sort-enabled {
pointer-events: none;
}
/* Enable pointer-events on the table-header children
*/
.fht-thead .table > thead.multi-sort-enabled > * {
pointer-events: auto;
}
/* Reserve space on the last table header cell for the multi-sort toggle button.
*/
.fht-thead .table > thead.multi-sort-enabled > tr > th:last-child {
padding-right: 32px;
}
/* A transparent overlay (pointer-events enabled) for the '::before'
* pseudo-element (the multi-sort toggle button) covering the margins
* so 'hover' and 'click' will not be fired on the underlying element.
*/
.fht-thead .table > thead.multi-sort-enabled::after {
font-family: FontAwesome;
font-size: 150%;
content: '';
line-height: 1.5em;
width: calc(1.5em + 6px);
height: 100%;
position: absolute;
right: 0;
top: 0;
background-color: transparent;
border-radius: 3px;
cursor: pointer;
pointer-events: auto;
}
/* The multi-sort toggle button (pointer-events enabled) as a '::before'
* pseudo-element
*/
.fht-thead .table > thead.multi-sort-enabled::before {
font-family: FontAwesome;
font-size: 150%;
content: '\f0dc';
text-align: center;
line-height: 1.5em;
width: 1.5em;
height: 1.5em;
position: absolute;
right: 0;
top: 0;
bottom: 2px;
margin: auto 3px;
/*background-color: rgba(255, 255, 255, .1);*/
/*background-image: linear-gradient(var(--main-bg-color), var(--main-bg-color));*/
background-color: var(--main-bg-color);
background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2));
border-radius: 3px;
cursor: pointer;
pointer-events: auto;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15), 0 9px 16px 0 rgba(0, 0, 0, .3), 0 4px 3px 0 rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .3);
}
/* Multi-sort toggle button hover (i.e. hover the parent element
* but not hover a child element)
*/
.fht-thead .table > thead.multi-sort-enabled:not(.child-hover):hover::before {
/*background: rgba(0, 0, 0, .1);*/
background-image: linear-gradient(rgba(0, 0, 0, .35), rgba(0, 0, 0, .35));
}
/* Not active multi-sort toggle button
*/
.fht-thead .table > thead.multi-sort-enabled:not(.multi-sort)::before {
/*opacity: .5;*/
color: rgba(var(--off-white-r), var(--off-white-g), var(--off-white-b), .5);
}
/*******************************************************************************
* Multi-sort ordering number above sort-indicator
*/
.fht-thead .table > thead.multi-sort-enabled.multi-sort .sort-indicator {
position: relative;
}
.fht-thead .table > thead.multi-sort-enabled.multi-sort .sort-indicator::after {
content: var(--sort-order);
position: absolute;
top: -6px;
left: 0;
right: 0;
font-size: 75%;
}
/*******************************************************************************
* Dimmed sort-indicator on hover
*/
.fht-thead .table > thead > tr > th .sort-indicator.show-dimmed-on-hover::before {
opacity: 0;
}
.fht-thead .table > thead > tr > th:hover .sort-indicator.show-dimmed-on-hover::before {
opacity: .5;
}
/*******************************************************************************
*/
.table > thead > tr > th.sortable {
/*position: relative;*/
}
.sort-indicator {
/*position: absolute;*/
/*right: 1em;*/
}
/*.actionbar-spacer {*/
/*height: calc(var(--actionbar-height) + var(--padding) + var(--border-width));*/
/*}*/
.text-shadow-dark {
text-shadow: var(--text-shadow-dark);
}
.text-shadow-light {
text-shadow: var(--text-shadow-light);
}
html, body, input, .popover {
font-family: 'Laila';
font-size: 12px;
font-weight: 400;
background-color: var(--main-bg-color);
color: var(--off-white);
}
h1, .h1, h2, .h2, h3, .h3 {
margin-top: 8px;
margin-bottom: 8px;
text-shadow: var(--text-shadow-dark);
}
h4, .h4, h5, .h5, h6, .h6 {
margin-top: 6px;
margin-bottom: 6px;
text-shadow: var(--text-shadow-dark);
}
h4, .h4 {
font-size: 18px;
}
h5, .h5 {
font-size: 14px;
}
h6, .h6 {
font-size: 12px;
}
body, address, pre, dt, dd,
blockquote footer, blockquote small, blockquote .small,
.table > thead > tr > th, .table > tbody > tr > th,
.table > tfoot > tr > th, .table > thead > tr > td,
.table > tbody > tr > td, .table > tfoot > tr > td,
.form-control, .btn,
.dropdown-menu > li > a, .dropdown-header,
.nav-tabs > li > a, .pagination > li > a, .pagination > li > span,
.thumbnail, .img-thumbnail,
.modal-title,
.popover {
line-height: 1.25;
}
.table > thead:first-child > tr:first-child > th:first-child {
border-top-left-radius: 3px;
}
.table > thead:first-child > tr:first-child > th:last-child {
border-top-right-radius: 3px;
}
.table > thead:last-child > tr:last-child > th {
border-bottom: 2px solid var(--off-white);
}
.table-layout-fixed {
table-layout: fixed;
}
.table-condensed {
white-space: nowrap;
}
.table-condensed > thead > tr > th {
font-weight: bold;
line-height: 2;
padding: 4px;
}
.table-condensed > tbody > tr > th,
.table-condensed > tbody > tr > td {
vertical-align: middle;
border: 1px solid rgba(0, 0, 0, .15);
min-width: 4em;
}
.table-condensed > tbody > tr > td > input.form-control {
min-width: 4em;
}
.table-condensed > thead > tr:nth-last-child(odd),
.table-condensed > tbody > tr:nth-child(even) {
background: rgba(0, 0, 0, .1)
}
.table-condensed > thead > tr:nth-last-child(even),
.table-condensed > tbody > tr:nth-child(odd) {
background: rgba(255, 255, 255, .1)
}
.table-condensed > tbody > tr.clickable:nth-child(even):hover,
.table-condensed > tbody > tr.clickable:nth-child(even):focus,
.table-condensed > tbody > tr.clickable:nth-child(even):active {
background: rgba(0, 0, 0, .2)
}
.table-condensed > tbody > tr.clickable:nth-child(odd):hover,
.table-condensed > tbody > tr.clickable:nth-child(odd):focus,
.table-condensed > tbody > tr.clickable:nth-child(odd):active {
background: rgba(255, 255, 255, .2)
}
.table-condensed > thead > tr:nth-last-child(odd) > th.clickable:hover,
.table-condensed > thead > tr:nth-last-child(odd) > th.clickable:focus,
.table-condensed > thead > tr:nth-last-child(odd) > th.clickable:active,
.table-condensed > tbody > tr:nth-child(even) > td.clickable:hover,
.table-condensed > tbody > tr:nth-child(even) > td.clickable:focus,
.table-condensed > tbody > tr:nth-child(even) > td.clickable:active {
background: rgba(0, 0, 0, .1)
}
.table-condensed > thead > tr:nth-last-child(even) > th.clickable:hover,
.table-condensed > thead > tr:nth-last-child(even) > th.clickable:focus,
.table-condensed > thead > tr:nth-last-child(even) > th.clickable:active,
.table-condensed > tbody > tr:nth-child(odd) > td.clickable:hover,
.table-condensed > tbody > tr:nth-child(odd) > td.clickable:focus,
.table-condensed > tbody > tr:nth-child(odd) > td.clickable:active {
background: rgba(255, 255, 255, .1)
}
.form-horizontal {
background: rgba(0, 0, 0, .1);
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 6px;
padding: 16px 16px 0 16px;
/*display: table;*/
margin: auto;
min-width: 75%;
max-width: 95%;
text-align: left;
}
.form-horizontal.full-width {
max-width: 100%;
}
.form-horizontal input[type='button'] {
text-align: left;
}
.modal-header, .modal-footer,
.form-horizontal-header, .form-horizontal-footer {
text-align: center;
}
.form-horizontal-header {
display: block;
}
.form-horizontal-footer {
padding-top: 16px;
}
.form-control {
padding: 6px;
height: auto;
font-size: inherit;
}
.input-group,
.form-group-sm .form-control {
border-radius: 4px;
}
.form-horizontal .form-group-sm .control-label {
padding: 7px;
}
.form-horizontal .form-group-sm .control-label.fa {
padding: 5px;
}
.form-horizontal .form-group-sm .control-label.fa::before {
font-size: 1.35em;
}
.radio input[type='radio'], .radio-inline input[type='radio'],
.checkbox input[type='checkbox'], .checkbox-inline input[type='checkbox'] {
margin-top: 2px;
}
input[type="radio"], input[type="checkbox"] {
accent-color: var(--off-black);
}
.form-horizontal .radio, .form-horizontal .checkbox {
white-space: nowrap;
border-radius: 3px;
padding: 5px 5px 2px 5px;
}
/*.navbar,*/
/*a:link,*/
/*a:visited, */
.modal-content {
background-color: var(--main-bg-color);
color: var(--off-white);
}
.clearfix {
clear: both;
}
.popover {
background-color: var(--main-bg-color);
color: var(--off-white);
white-space: nowrap;
max-width: none;
z-index: 2500;
}
.popover.right > .arrow::after {
border-right-color: var(--main-bg-color);
}
.popover.left > .arrow::after {
border-left-color: var(--main-bg-color)
}
.popover.top > .arrow::after {
border-top-color: var(--main-bg-color);
}
.popover.bottom > .arrow::after {
border-bottom-color: var(--main-bg-color);
}
/*.popover {*/
/*max-width: none;*/
/*}*/
.popover-content {
padding: 5px;
}
.popover-content-header {
margin-bottom: 5px;
}
.popover-content-footer {
text-align: center;
margin-top: 5px;
padding: 5px;
border-top: 1px solid var(--off-white);
}
.list-group-item {
padding: 2px 4px;
margin-bottom: 0;
background-color: inherit;
border-top: 0;
border-bottom: 0;
line-height: 1.125;;
}
.list-group-item-heading {
background-color: inherit;
font-weight: bold;
margin-top: -1px;
margin-bottom: 0;
padding: 3px 5px 1px 5px;
}
.list-group-item:first-child {
border-top: 1px solid var(--off-white);
}
.list-group-item:last-child {
border-bottom: 1px solid var(--off-white);
}
/*.list-group {*/
/*background: white;*/
/*}*/
.list-group:hover {
background: rgba(0, 0, 0, .1);
}
.horizontal-flex-container {
display: flex;
flex-direction: row;
/*justify-content: center;*/
/*justify-content: space-around;*/
justify-content: space-between;
align-items: center;
/*margin-left: 1px;*/
/*margin-right: 1px;*/
}
.horizontal-flex-container-start-aligned {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: start;
}
.horizontal-flex-container2 {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.horizontal-flex-container2-start-aligned {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: start;
}
.horizontal-flex-container-center {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
/*******************************************************************************
* Flex box with variable items supporting overflow
* https://stackoverflow.com/questions/33454533/
* cant-scroll-to-top-of-flex-item-that-is-overflowing-container
* https://stackoverflow.com/a/33856609/3597276
*/
.horizontal-flex-container-overflow,
.horizontal-flex-container-center-overflow,
.horizontal-flex-container-center-top-overflow {
display: flex;
flex-direction: row;
overflow-x: auto;
}
.horizontal-flex-container-overflow > * {
margin: auto;
}
.horizontal-flex-container-center-overflow > * {
margin-top: auto;
margin-bottom: auto;
}
.horizontal-flex-container-center-top-overflow > * {
margin-bottom: auto;
}
.horizontal-flex-container-center-overflow > *:first-child,
.horizontal-flex-container-center-top-overflow > *:first-child {
margin-left: auto;
}
.horizontal-flex-container-center-overflow > *:last-child,
.horizontal-flex-container-center-top-overflow > *:last-child {
margin-right: auto;
}
/*******************************************************************************
*/
.vertical-flex-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.vertical-flex-container2 {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.vertical-flex-container-center {
display: flex;
flex-direction: column;
justify-content: center;
}
.vertical-flex-container .checkbox label,
.vertical-flex-container2 .checkbox label,
.vertical-flex-container-center .checkbox label {
padding-left: 0;
}
.vertical-flex-container .checkbox label div,
.vertical-flex-container2 .checkbox label div,
.vertical-flex-container-center .checkbox label div {
display: inherit;
/*background: unset;*/
border: 1px solid;
margin-bottom: -.56em;
padding: .1em;
border-radius: 2px;
}
.vertical-inline-flex {
display: inline-flex;
flex-direction: column;
/*margin: -1px;*/
}
.side-bar {
background-color: transparent;
top: 0;
right: 0;
clear: both;
color: var(--off-white);
width: 20px;
padding: 2px;
font-size: 16px;
position: fixed;
z-index: 2100;
}
.side-bar-item {
padding: 0;
margin: 2px;
float: right;
}
.actionbar {
background-color: var(--main-bg-color);
/* border-top:1px solid ForestGreen; */
border-top: var(--border-width) solid rgba(255, 255, 255, .2);
bottom: 0;
clear: both;
color: var(--off-white);
font-size: 16px;
white-space: nowrap;
height: var(--actionbar-height);
padding: var(--padding);
position: fixed;
width: 100%;
z-index: 2000;
/* flex container (parent) */
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.actionbar[disabled] {
filter: contrast(60%) brightness(120%);
}
.action-bar-container {
/* flex item (child) */
flex: 0 1 auto;
overflow-x: auto;
overflow-y: hidden;
/* flex container (parent) */
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
.action-bar-tray {
/* flex item (child) */
flex: 0 0 auto;
/* flex container (parent) */
display: flex;
flex-flow: row-reverse nowrap;
justify-content: flex-start;
}
.actionbar-item {
/*display: inline-block;*/
height: 124px;
padding: 0;
margin: 4px 2px 4px 3px;
/*max-width: 134px;*/
/*vertical-align: bottom;*/
/*float: left;*/
}
/*.actionbar-logo, .actionbar-clock, .actionbar-spinner {*/
/*!*float: right;*!*/
/*!*text-align: center;*!*/
/*}*/
.action-image .widget-clock {
padding: 4px;
}
.actionbar-clock {
width: 104px;
}
.widget-clock .time {
font-size: .9em;
vertical-align: middle;
padding-bottom: 4px;
opacity: .7;
white-space: nowrap;
}
.widget-clock.clock-theme-app-default .clock-face {
stroke: rgba(255, 255, 255, .5);
fill: rgba(0, 0, 0, .05);
}
.widget-clock.clock-theme-app-default .minor {
stroke: rgba(255, 255, 255, .5);
stroke-width: .5;
}
.widget-clock.clock-theme-app-default .major {
stroke: rgba(255, 255, 255, .7);
stroke-width: .5;
}
.widget-clock.clock-theme-app-default .hour {
stroke: rgba(255, 255, 255, .7);
stroke-width: 1;
}
.widget-clock.clock-theme-app-default .minute {
stroke: rgba(255, 255, 255, .7);
stroke-width: .75;
}
.widget-clock.clock-theme-app-default .second,
.widget-clock.clock-theme-app-default .second-counterweight {
stroke: rgba(234, 31, 54, .95);
stroke-width: .5;
}
.widget-clock.clock-theme-app-default .second-counterweight {
stroke-width: 1.5;
}
.action-title {
font-size: 12px;
text-align: center;
}
.actionbar-logo > .action-title {
opacity: .7;
}
.actionbar-logo > .action-image {
opacity: .5;
width: 100px;
}
.action-image {
height: 100px;
padding: 0;
margin: 0 2px 2px;
max-width: 100px;
}
.img-rounded {
border: 1px solid rgba(255, 255, 255, .2);
background-color: rgba(0, 0, 0, .1);
}
.calendar {
width: 75%;
}
/*.clickable {*/
/*display: inline-block;*/
/*}*/
.clickable .fa,
.clickable .el,
.clickable .ion {
border-radius: 3px;
padding: 2px;
border: 1px solid transparent;
}
:not([disabled]) .clickable:not([disabled]) > .fa,
:not([disabled]) .clickable:not([disabled]) > .el,
:not([disabled]) .clickable:not([disabled]) > .ion {
background: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .2);
}
:not([disabled]) .clickable:not([disabled]):hover > .fa,
:not([disabled]) .clickable:not([disabled]):focus > .fa,
:not([disabled]) .clickable:not([disabled]):active > .fa,
:not([disabled]) .clickable:not([disabled]):hover > .el,
:not([disabled]) .clickable:not([disabled]):focus > .el,
:not([disabled]) .clickable:not([disabled]):active > .el,
:not([disabled]) .clickable:not([disabled]):hover > .ion,
:not([disabled]) .clickable:not([disabled]):focus > .ion,
:not([disabled]) .clickable:not([disabled]):active > .ion {
/*.clickable:not([disabled]):hover > .fa,*/
/*.clickable:not([disabled]):focus > .fa,*/
/*.clickable:not([disabled]):active > .fa {*/
background: rgba(0, 0, 0, .1);
border-color: rgba(0, 0, 0, .2);
}
.clickable.img-thumbnail:not([disabled]):hover,
.clickable.img-thumbnail:not([disabled]):focus,
.clickable.img-thumbnail:not([disabled]):active,
.clickable:not([disabled]):hover > .action-image,
.clickable:not([disabled]):focus > .action-image,
.clickable:not([disabled]):active > .action-image {
background: rgba(255, 255, 255, .2);
/*text-decoration: none;*/
}
.clickable:not([disabled]):hover {
cursor: pointer;
}
[disabled].clickable:hover,
[disabled] > .clickable:hover,
[disabled] > * > .clickable:hover {
cursor: not-allowed;
}
.clickable:hover > * {
cursor: inherit;
}
.board {
clear: both;
position: relative;
}
.route {
/*background-color: rgba(255, 255, 231, .95); !* #FFFFE7 *!*/
background-color: rgba(var(--off-white-r), var(--off-white-g), var(--off-white-b), .65);
/* border: 1px dashed ForestGreen;*/
border-radius: 5px;
color: var(--off-black);
float: left;
margin: 3px;
height: 920px;
}
.route-1 {
width: 109px;
}
.route-2 {
width: 216px;
}
.route-3 {
width: 323px;
}
.route-4 {
width: 430px;
}
.route-5 {
width: 537px;
}
.route-6 {
width: 644px;
}
.route-7 {
width: 751px;
}
.route-8 {
width: 858px;
}
/*.vertical-inline-flex {*/
/*display: inline-flex;*/
/*flex-direction: column;*/
/*margin: -1px;*/
/*}*/
.cage {
border: 1px solid var(--main-bg-color);
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
float: left;
height: 149px;
margin: 2px;
padding: 2px;
position: relative;
width: 103px;
}
.cage-wide {
width: 210px;
}
.cage-busy {
border: 2px solid var(--cage-remark-color);
}
.cage-header {
font-size: 13px;
font-weight: 700;
margin-bottom: 1px;
text-transform: uppercase;
}
/*.cage-header.rood {*/
/*color: #c0392b;*/
/*}*/
/*.cage-header.blauw {*/
/*color: #00A0E0;*/
/*}*/
/*.cage-header.groen {*/
/*color: rgb(0, 160, 0);*/
/*}*/
/*.cage-header.geel {*/
/*color: #dbb007;*/
/*}*/
/*.cage-header.paars {*/
/*color: #8e44ad;*/
/*}*/
/*.cage-header.dark {*/
/*color: #2c3e50;*/
/*}*/
.cage-footer {
position: absolute;
bottom: 0;
width: 100%;
margin-left: -2px;
}
.cage-remark {
margin: -1px;
border-left: 1px solid var(--cage-remark-color);
border-bottom: 1px solid var(--cage-remark-color);
color: var(--cage-remark-color);
float: right;
line-height: 1;
font-size: 14px;
font-weight: 700;
padding-left: 2px;
}
.cage-comment {
border-bottom: 1px solid var(--cage-remark-color);
bottom: 22px;
color: var(--cage-remark-color);
font-size: 10px;
left: 3px;
position: absolute;
right: 3px;
text-align: center;
}
.cage-content {
display: inline-table;
}
.cage-content-fixed {
width: 90px;
}
.cage-species {
color: var(--off-black);
font-size: 12px;
font-weight: 700;
}
.cage-meal {
color: var(--off-black);
font-size: 10px;
font-weight: 400;
}
/*.cage-meal-10 {*/
/*padding-left: 10px;*/
/*}*/
.empty-cage {
background-color: rgba(0, 0, 0, .025);
border-color: rgba(0, 0, 0, .075);
box-shadow: none;
}
.selected-cage {
box-shadow: 3px 3px 8px var(--off-black);
border-color: var(--off-black);
background-color: rgba(var(--main-bg-color-r), var(--main-bg-color-g), var(--main-bg-color-b), .2);
}
/*.cage-lights,*/
/*.cage-info, .cage-adoption,*/
/*.cage-leftover, .cage-medication*/
.cage-footer-item {
color: var(--main-bg-color);
font-size: 17px;
background-color: transparent;
text-align: center;
bottom: 0;
}
/*.cage-info, .cage-adoption {*/
/*float: right;*/
/*}*/
/*.cage-leftover, .cage-medication {*/
/*float: left;*/
/*}*/
/*.cage-adoption, .cage-leftover {*/
/*width: 20%;*/
/*}*/
/*.cage-info, .cage-medication {*/
/*width: 30%;*/
/*}*/
.cage-label {
/*background-color: rgba(255, 255, 231, .9); !* #FFFFE7 *!*/
background-color: rgba(var(--off-white-r), var(--off-white-g), var(--off-white-b), .9);
color: var(--off-black);
padding: 2px 8px 0;
border: 1px solid var(--off-black);
border-radius: 3px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, .4);
display: block;
}
.wall-route-header {
display: inline;
text-align: center;
margin: 3px 2px auto;
}
.food-prepare-header {
margin: 3px 2px auto;
padding-top: 5px;
padding-bottom: 2px;
}
/*.text-info,*/
.form-control, .input-group-addon {
background-color: var(--input-bg-color);
border-color: var(--off-black);
color: var(--off-white);
}
.input-group-addon {
padding: 0 6px;
}
select *:disabled,
select *[disabled],
.muted,
[disabled].clickable,
[disabled] > .clickable,
[disabled] > * > .clickable,
tr.clickable > td[disabled] {
color: var(--off-black);
opacity: .75;
}
[disabled].form-control,
[disabled] > .form-control,
[disabled] > * > .form-control,
[disabled].input-group-addon,
[disabled] > .input-group-addon,
[disabled] > * > .input-group-addon,
.form-control[disabled],
.form-control[readonly],
fieldset[disabled].form-control {
background-color: var(--button-bg-color);
color: var(--off-black);
opacity: .7;
}
[disabled] > * > * > .form-control,
[disabled] > * > * > .input-group-addon {
color: var(--off-black);
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
color: var(--off-black);
}
.btn-info, .btn-default .btn-danger, .btn-success {
color: var(--off-black);
background-color: var(--off-white);
border-color: rgba(0, 0, 0, .2);
}
.open > .dropdown-toggle.btn-default,
.btn, .btn-info, .btn-success, .btn-danger {
background-color: var(--button-bg-color);
border-color: var(--off-black);
color: var(--off-white);
}
.btn-default:active, .btn-default.active,
.btn-info:active, .btn-info.active {
background-color: var(--soft-green);
border-color: var(--off-black);
color: var(--off-black);
}
.btn-info:active:hover, .btn-info.active:hover,
.open > .dropdown-toggle.btn-info:hover,
.btn-info:active:focus, .btn-info.active:focus,
.open > .dropdown-toggle.btn-info:focus,
.btn-info.focus:active, .btn-info.active.focus,
.open > .dropdown-toggle.btn-info.focus,
.btn-default:active:hover, .btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus, .btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default.focus:active, .btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus,
.btn-info:hover, .btn-default:hover, .btn-danger:hover, .btn-success:hover,
.btn:hover, .btn:focus, .btn.focus {
color: var(--off-black);
/* color: inherit; */
}
.btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus,
.btn-info.disabled:hover, .btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus, .btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus, .btn-info.disabled.focus,
.btn-info.focus[disabled], fieldset[disabled] .btn-info.focus {
background-color: var(--button-bg-color);
border-color: var(--off-black);
}
date-picker-input > .input-group > .dropdown-menu {
min-width: 282px;
}
.nav > li > a {
color: var(--off-white);
border: 1px solid transparent;
}
date-picker-input:not([disabled]) .clickable:hover .form-control,
date-picker-input:not([disabled]) .clickable:focus .form-control,
date-picker-input:not([disabled]) .clickable:active .form-control,
date-picker-input:not([disabled]) .clickable:hover .input-group-addon,
date-picker-input:not([disabled]) .clickable:focus .input-group-addon,
date-picker-input:not([disabled]) .clickable:active .input-group-addon,
:not([disabled]).radio:hover,
:not([disabled]).radio:focus,
:not([disabled]).radio:active,
:not([disabled]).checkbox:hover,
:not([disabled]).checkbox:focus,
:not([disabled]).checkbox:active,
:not([disabled]).text-input:hover,
:not([disabled]).text-input:focus,
:not([disabled]).text-input:active,
:not([disabled]).nav > li > a:hover,
:not([disabled]).nav > li > a:focus,
:not([disabled]).nav > li > a:active,
/*date-picker-input > .input-group > .input-group-addon:hover,*/
/*date-picker-input > .input-group > .input-group-addon:focus,*/
/*date-picker-input > .input-group > .input-group-addon:active,*/
/*.input-group-addon > .fa:hover, .input-group-addon > .fa:focus, .input-group-addon > .fa:active,*/
/*:not([disabled]).input-group-addon.clickable:hover,*/
/*:not([disabled]).input-group-addon.clickable:focus,*/
/*:not([disabled]).input-group-addon.clickable:active,*/
/*:not([disabled]) > .input-group-addon.clickable:hover,*/
/*:not([disabled]) > .input-group-addon.clickable:focus,*/
/*:not([disabled]) > .input-group-addon.clickable:active,*/
date-picker-input:not([disabled]) .clickable:hover,
date-picker-input:not([disabled]) .clickable:focus,
date-picker-input:not([disabled]) .clickable:active,
/*.btn-default:hover, .btn-default:focus, .btn-default:active,*/
/*.btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover,*/
/*.btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus,*/
/*.btn-default.focus:active, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus,*/
:not([disabled]).btn:hover,
:not([disabled]).btn:focus,
:not([disabled]).open > :not([disabled]).dropdown-toggle.btn:hover,
:not([disabled]).open > :not([disabled]).dropdown-toggle.btn:focus,
:not([disabled]).open > :not([disabled]).dropdown-toggle.btn.focus {
background-color: var(--button-bg-color);
/*border-color: var(--off-black);*/
/*box-shadow: inset 0 0 2px rgba(0, 0, 0, .5), 0 0 8px rgba(247, 209, 50, .9);*/
border-color: rgba(0, 0, 0, .75);
/*border-radius: 4px;*/
box-shadow: 0 0 4px rgba(255, 255, 255, .5) inset, 0 0 8px rgba(0, 0, 0, .5); /*color: var(--off-white);*/
/*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(247, 209, 50, .6);*/
}
:not([disabled]).btn:active,
:not([disabled]).btn:active:hover,
:not([disabled]).btn.active:hover,
:not([disabled]).btn:active:focus,
:not([disabled]).btn.active:focus,
:not([disabled]).btn.focus:active,
:not([disabled]).btn.active.focus {
background-color: var(--soft-green);
border-color: rgba(0, 0, 0, .75);
box-shadow: 0 0 4px rgba(255, 255, 255, .35) inset, 0 0 8px rgba(0, 0, 0, .35); }
:not([disabled]).text-input:focus,
:not([disabled]).form-control:focus {
border-color: #66AFE9;
}
.prep-list {
list-style: none;
padding-left: 0;
}
/*******************************************************************************
* Navigation bar
*/
.navbar-fixed-top {
border-width: 0;
margin: 0;
min-height: unset;
background-color: var(--main-bg-color);
}
.navbar-spacer {
height: 42px;
}
.navbar-nav > li > a {
padding: 6px;
margin: 4px;
}
/*******************************************************************************
* Bouncing bar spinner
*/
.bouncing-bar-spinner {
height: 8px;
width: 100%;
position: relative;
overflow: hidden;
background-color: rgba(0, 0, 0, 0);
border-radius: 4px;
}
.bouncing-bar-spinner::before {
display: block;
position: absolute;
content: '';
background-color: var(--off-white);
border-radius: 4px;
animation: bouncing-bar-spinner-anim 4s linear infinite;
}
@keyframes bouncing-bar-spinner-anim {
0% {
left: 0;
width: 0;
height: 8px;
top: 0;
}
5% {
left: 3%;
width: 5%;
height: 5px;
}
10% {
left: 10%;
width: 10%;
height: 4px;
top: 2px;
}
20% {
left: 30%;
width: 20%;
}
25% {
left: 50%;
width: 25%;
height: 1px;
top: 4px;
}
30% {
left: 60%;
width: 20%;
}
40% {
left: 87%;
width: 10%;
height: 4px;
top: 2px;
}
45% {
left: 95%;
width: 5%;
height: 5px;
}
50% {
left: 100%;
width: 0;
height: 8px;
top: 0;
}
55% {
left: 95%;
width: 5%;
height: 5px;
}
60% {
left: 87%;
width: 10%;
height: 4px;
top: 2px;
}
70% {
left: 60%;
width: 20%;
}
75% {
left: 50%;
width: 25%;
height: 1px;
top: 4px;
}
80% {
left: 30%;
width: 20%;
}
90% {
left: 10%;
width: 10%;
height: 4px;
top: 2px;
}
95% {
left: 3%;
width: 5%;
height: 5px;
}
100% {
left: 0;
width: 0;
height: 8px;
top: 0;
}
}
/*******************************************************************************
* Calendar
*/
.fc-toolbar h2 {
font-size: 22px;
}
.fc-unthemed .fc-today {
background-color: rgba(255, 255, 0, .1);
}
.fc-unthemed .fc-sat:not(.fc-today):not(.fc-day-number):not(th),
.fc-unthemed .fc-sun:not(.fc-today):not(.fc-day-number):not(th) {
background-color: rgba(192, 0, 128, .1);
}
.fc-unthemed .fc-view-container {
background: rgba(152, 152, 152, .5);
}
.fc-day-grid-event .fc-content {
display: inline;
}
.public-holiday-belgium::before, .public-holiday-netherlands::before {
content: '';
float: left;
width: 1em;
height: .75em;
margin: .2em .4em .2em .2em;
border-radius: 2px;
}
.public-holiday-belgium::before {
background-image: linear-gradient(90deg, #000 33%, #fae042 33%, #fae042 66%, #ed2939 66%);
}
.public-holiday-netherlands::before {
background-image: linear-gradient(#AC1F2C 33%, #FFFFFF 33%, #FFFFFF 66%, #244889 66%);
}
.fc-time-grid-event .fc-content {
transform: rotate(90deg);
transform-origin: 0 100% 0;
margin-top: -1em;
overflow: unset;
}
.fc-time-grid-event .fc-time,
.fc-time-grid-event .fc-title {
padding: 0 4px;
display: inline;
}
.fc-time-grid-event.fa::before {
color: rgba(0, 0, 0, .95);
padding: 1px;
}
/*******************************************************************************
* General
*/
.text-info {
font-weight: bold;
text-decoration: underline;
color: var(--off-black);
text-shadow: -2px -2px 2px var(--soft-yellow), -2px 2px 2px var(--soft-yellow), 2px -2px 2px var(--soft-yellow), 2px 2px 2px var(--soft-yellow), -4px -4px 4px var(--soft-yellow), -4px 4px 4px var(--soft-yellow), 4px -4px 4px var(--soft-yellow), 4px 4px 4px var(--soft-yellow), -6px -6px 6px var(--soft-yellow), -6px 6px 6px var(--soft-yellow), 6px -6px 6px var(--soft-yellow), 6px 6px 6px var(--soft-yellow), 0px 0px 6px var(--soft-yellow), 0px 0px 8px var(--soft-yellow);
}
.text-muted {
color: rgba(0, 0, 0, .4);
}
.form-control::-webkit-input-placeholder {
color: var(--off-black);
opacity: .7;
}
.form-control::-moz-placeholder {
color: var(--off-black);
opacity: .7;
}
.form-control:-ms-input-placeholder {
color: var(--off-black);
opacity: .7;
}
.form-control::placeholder {
color: var(--off-black);
opacity: .7;
}
.placeholder {
opacity: .7;
}
.checkbox-horizontal-header {
margin-left: -20px;
}
.fa-fw {
width: 1.7em;
height: 1.55em;
}
.fa-font-1x5 {
font-size: 150%
}
.fa-stack {
margin-top: -4px;
margin-left: 5px;
width: 2em;
height: 1.5em;
line-height: 1.25em;
}
.command-icon {
/*width: 100%;*/
display: block;
margin: auto;
font-size: 1.4em;
}
th .command-icon {
/*margin-top: 4px;*/
}
.bold {
font-weight: bold;
}
/*******************************************************************************
* Virtual keyboard
*/
table.keyboardInputMaster {
background-color: var(--main-bg-color);
border-color: rgba(255, 255, 255, .1);
}
table.keyboardInputMaster * {
font-weight: 700;
}
table.keyboardInputMaster.relativeKeyboard {
border-radius: .3em;
border-collapse: separate;
}
table.keyboardInputMaster.relativeKeyboard thead tr th {
border-radius: .3em .3em 0 0;
}
table.keyboardInputMaster.numeric-keyboard tbody tr td table tbody tr td.last {
width: 34%;
}
table.keyboardInputMaster.numeric-keyboard tbody tr td table tbody tr td {
width: 22%;
font-family: inherit;
}
table.keyboardInputMaster tbody tr td {
text-align: center;
}
table.keyboardInputMaster tbody tr td table {
/*background-color: rgba(255, 255, 231, .75); !* #FFFFE7 *!*/
background-color: rgba(var(--off-white-r), var(--off-white-g), var(--off-white-b), .75);
border-radius: .2em;
}
table.keyboardInputMaster tbody tr td table tbody tr td {
/*background-color: rgba(255, 255, 231, .9); !* #FFFFE7 *!*/
background-color: rgba(var(--off-white-r), var(--off-white-g), var(--off-white-b), .9);
border-color: rgba(0, 0, 0, .15);
}
table.keyboardInputMaster thead tr th {
background-color: rgba(0, 0, 0, .2);
padding: .35em;
}
table.keyboardInputMaster tbody tr td {
padding: .3em;
}
table.keyboardInputMaster thead tr th div {
font-size: 100% !important;
font-weight: normal;
}
table.keyboardInputMaster tbody tr td.keyboardInputNumpad {
padding-right: .5em;
padding-left: 0;
}
table.keyboardInputMaster thead tr th span,
table.keyboardInputMaster thead tr th strong,
table.keyboardInputMaster thead tr th small,
table.keyboardInputMaster thead tr th big {
/*background-color: rgba(255, 255, 231, .9); !* #FFFFE7 *!*/
background-color: rgba(var(--off-white-r), var(--off-white-g), var(--off-white-b), .9);
border-color: rgba(0, 0, 0, .15);
border-radius: .2em;
}
table.keyboardInputMaster thead tr th small {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right-color: rgba(0, 0, 0, .15);
}
table.keyboardInputMaster thead tr th big {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-width: 1px;
border-style: solid;
border-right-color: rgba(0, 0, 0, .15);
}
table.keyboardInputMaster tbody tr td table tbody tr td.deadkey {
background-color: rgba(0, 0, 0, .25);
}
table.keyboardInputMaster thead tr th span:first-of-type,
table.keyboardInputMaster thead tr th span:last-of-type,
table.keyboardInputMaster thead tr th big,
table.keyboardInputMaster thead tr th small,
table.keyboardInputMaster thead tr th strong {
width: 0;
padding: 0 1.1em 0 .25em;
overflow: hidden;
color: transparent;
}
/*table.keyboardInputMaster thead tr th strong {*/
/*padding: 0 .9em 0 .2em;*/
/*}*/
table.keyboardInputMaster thead tr th span:first-of-type::before,
table.keyboardInputMaster thead tr th span:last-of-type::before,
table.keyboardInputMaster thead tr th big::before,
table.keyboardInputMaster thead tr th small::before,
table.keyboardInputMaster thead tr th strong::before {
font-family: FontAwesome;
color: var(--off-black);
}
table.keyboardInputMaster thead tr th span:first-of-type::before {
content: '';
margin-left: -1px;
}
table.keyboardInputMaster thead tr th span:last-of-type::before {
content: '';
margin-left: -2px;
}
table.keyboardInputMaster thead tr th big::before {
content: '';
}
table.keyboardInputMaster thead tr th small::before {
content: '';
}
table.keyboardInputMaster thead tr th strong::before {
content: '';
/*content: '';*/
margin-left: 1px;
}
table.keyboardInputMaster thead tr th span:active,
table.keyboardInputMaster thead tr th span.pressed,
table.keyboardInputMaster thead tr th strong:active,
table.keyboardInputMaster thead tr th strong.pressed,
table.keyboardInputMaster thead tr th small:active,
table.keyboardInputMaster thead tr th small.pressed,
table.keyboardInputMaster thead tr th big:active,
table.keyboardInputMaster thead tr th big.pressed {
border-right-color: rgba(0, 0, 0, .1);
border-bottom-color: rgba(0, 0, 0, .1);
background-color: rgba(255, 255, 255, .45);
}
table.keyboardInputMaster tbody tr td table tbody tr td:active,
table.keyboardInputMaster tbody tr td table tbody tr td.pressed {
border-right-color: rgba(0, 0, 0, .1);
border-bottom-color: rgba(0, 0, 0, .1);
background-color: rgba(0, 0, 0, .25);
}
table.keyboardInputMaster thead tr th span:active,
table.keyboardInputMaster thead tr th span.pressed,
table.keyboardInputMaster thead tr th strong:active,
table.keyboardInputMaster thead tr th strong.pressed,
table.keyboardInputMaster thead tr th small:active,
table.keyboardInputMaster thead tr th small.pressed,
table.keyboardInputMaster thead tr th big:active,
table.keyboardInputMaster thead tr th big.pressed,
table.keyboardInputMaster tbody tr td table tbody tr td:active,
table.keyboardInputMaster tbody tr td table tbody tr td.pressed {
border-top-color: rgba(0, 0, 0, .6) !important;
border-left-color: rgba(0, 0, 0, .6) !important;
}
table.keyboardInputMaster thead tr th span:hover,
table.keyboardInputMaster thead tr th span.hover,
table.keyboardInputMaster thead tr th strong:hover,
table.keyboardInputMaster thead tr th strong.hover,
table.keyboardInputMaster thead tr th small:hover,
table.keyboardInputMaster thead tr th small.hover,
table.keyboardInputMaster thead tr th big:hover,
table.keyboardInputMaster thead tr th big.hover {
border-color: rgba(255, 255, 255, .3);
background-color: rgba(255, 255, 255, .65);
}
table.keyboardInputMaster tbody tr td table tbody tr td:hover,
table.keyboardInputMaster tbody tr td table tbody tr td.hover {
border-color: rgba(0, 0, 0, .25);
background-color: rgba(0, 0, 0, .15);
}
table.keyboardInputMaster tbody tr td table tbody tr td:active {
background-color: rgba(0, 0, 0, .225);
}
table.keyboardInputMaster thead tr th div ol {
/*background-color: rgba(255, 255, 231, 1); !* #FFFFE7 *!*/
background-color: var(--off-white);
border-color: rgba(0, 0, 0, .15);
border-radius: .2em;
}
table.keyboardInputMaster thead tr th div ol li:hover,
table.keyboardInputMaster thead tr th div ol li.hover {
background-color: rgba(0, 0, 0, .15);
}
table.keyboardInputMaster thead tr th div ol li:active {
background-color: rgba(0, 0, 0, .25);
}
table.keyboardInputMaster tbody tr td.keyboardInputTextPad {
width: 80%;
}
table.keyboardInputMaster tbody tr td.keyboardInputNumpad table {
width: 100%;
}
/*******************************************************************************
* Scrollable table
*/
.scrollableContainer {
padding-bottom: 16px;
height: inherit;
}
/*.scrollableContainer .headerSpacer {*/
/*height: 2.5em;*/
/*}*/
/*.scrollArea table .th-inner {*/
/*height: 2.5em;*/
/*line-height: 2.5em;*/
/*}*/
.scrollArea,
.scrollArea table th .box,
.scrollableContainer .headerSpacer {
border: none;
}
.scrollArea {
padding: 1px;
background-color: rgba(0, 0, 0, .1);
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 0 0 3px 3px;
}
.scrollArea table tbody tr td,
.scrollArea table tbody tr td:first-child,
.scrollArea table tbody tr td:last-child,
.scrollArea table tbody tr:first-child td,
.scrollArea table tbody tr:last-child td,
.scrollArea table tr th:first-child th .box {
border: 1px solid rgba(0, 0, 0, .15);
}
/*.table > thead > tr > th,*/
.scrollableContainer .headerSpacer {
border-bottom: 2px solid var(--off-white);
background-color: rgba(0, 0, 0, .15);
border-radius: 3px 3px 0 0;
}
scrollable-table .table > thead > tr > th {
border-bottom: none;
width: 1%;
}
/*******************************************************************************
* Angular-Bootstrap 'nav' tree
*/
.form-branch-data,
.abn-tree {
background-color: rgba(0, 0, 0, .1);
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, .25);
padding: 8px;
}
ul.abn-tree li.abn-tree-row a {
padding: 0 6px 3px;
}
ul.nav.abn-tree .tree-label {
padding-left: 5px;
}
.nav > li > a:hover,
.nav > li > a:focus,
.nav > li > a:active {
background-color: transparent;
border-color: rgba(255, 255, 255, .5);
box-shadow: 0 1px 4px rgba(0, 0, 0, .4) inset,
0 0 8px rgba(255, 255, 255, .4);
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
color: var(--off-white);
background-color: transparent;
}
.nav-pills > li.active.leaf > a,
.nav-pills > li.active.leaf > a:hover,
.nav-pills > li.active.leaf > a:focus {
background-color: rgba(0, 0, 0, .1);
border: 1px solid rgba(255, 255, 255, .35);
}
.nav > li:not(.leaf) > a,
.nav-pills > li:not(.leaf) > a,
.nav-pills > li:not(.leaf) > a:hover,
.nav-pills > li:not(.leaf) > a:focus {
color: var(--off-black);
}
.checkbox.stand-alone input[type='checkbox'],
.checkbox-inline.stand-alone input[type='checkbox'] {
margin-left: -15px;
}
/*******************************************************************************
* Color picker
*/
.sp-replacer {
background-color: var(--off-white);
border: 1px solid var(--off-black);
color: var(--off-black);
border-radius: 4px;
}
.sp-replacer:hover, .sp-replacer.sp-active {
border-color: rgba(0, 0, 0, .3);;
color: var(--off-black);
}
.sp-preview, .sp-alpha, .sp-thumb-el {
border: 1px solid var(--off-black);
border-radius: 3px;
}
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
border-radius: 2px;
}
.sp-container {
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 5px;
/*background-color: rgba(255, 255, 255, .2);*/
background-color: var(--main-bg-color);
}
.sp-container, .sp-container button, .sp-container input,
.sp-color, .sp-hue, .sp-clear {
font: inherit;
}
.sp-palette-container {
border-right: 1px solid rgba(255, 255, 255, .2);
}
.sp-palette {
background-color: rgba(0, 0, 0, .2);
padding: 4px;
border-radius: 3px;
}
.sp-palette-row-selection {
border-top: 1px solid rgba(255, 255, 255, .3);
margin-top: 2px;
padding-top: 2px;
}
.sp-palette .sp-thumb-el {
border: 1px solid var(--off-white);
}
.sp-palette .sp-thumb-el:hover,
.sp-palette .sp-thumb-el.sp-thumb-active {
border-color: var(--off-black);
}
.sp-picker-container {
border-left: 0 none;
}
.sp-color, .sp-hue, .sp-clear {
border: 1px solid rgba(0, 0, 0, .6);
border-radius: 3px;
margin: 4px;
}
.sp-hue {
height: unset;
}
.sp-sat, .sp-val {
border-radius: 3px;
}
.sp-top-inner {
background-color: rgba(0, 0, 0, .2);
border-radius: 3px;
}
.sp-slider {
background-color: var(--off-white);
opacity: .8;
border: 1px solid rgba(0, 0, 0, .6);
}
.sp-initial {
border: 1px solid rgba(0, 0, 0, .6);
border-radius: 3px;
}
.sp-input-container {
width: 103px;
}
.sp-input {
color: var(--off-black);
font-size: 10px !important;
background-color: rgba(0, 0, 0, .15);
border: 1px solid rgba(0, 0, 0, .4);
padding: 6px 4px;
}
.sp-input:focus {
border: 1px solid rgba(255, 255, 255, .35);
box-shadow: 0 0 3px 0 var(--off-black);
}
.sp-palette-button-container, .sp-button-container {
padding-top: 4px;
}
.sp-container button {
background-color: var(--off-white);
background-image: linear-gradient(to bottom, var(--off-white), rgba(0, 0, 0, .1));
border-color: rgba(0, 0, 0, .3);
color: var(--off-black);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
.sp-cancel {
font-size: inherit;
color: var(--off-black) !important;
background-color: var(--off-white);
background-image: linear-gradient(to bottom, var(--off-white), rgba(0, 0, 0, .1));
padding: 4px;
border: 1px solid rgba(0, 0, 0, .3);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
border-radius: 3px;
}
.sp-container button:active, .sp-cancel:active {
border-color: rgba(0, 0, 0, .4);
box-shadow: 0 0 5px 2px var(--off-white) inset, 0 0 1px 0 var(--off-white);
}
.sp-cancel, .sp-cancel:hover, .sp-cancel:active {
color: var(--off-black) !important;
text-decoration: none !important;
}
.sp-container button:hover, .sp-cancel:hover {
background-image: linear-gradient(to bottom, var(--off-white), rgba(0, 0, 0, .2));
border-color: rgba(0, 0, 0, .6);
}
/*******************************************************************************
* Date picker
*/
.dropdown-menu {
z-index: 3000;
background-color: var(--main-bg-color);
padding: 5px;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 6px;
box-shadow: 0 6px 12px rgba(0, 0, 0, .3);
}
.dropdown-menu > li > div[uib-datepicker] {
background-color: rgba(0, 0, 0, .05);
padding: 4px;
border: 1px solid rgba(255, 255, 255, .35);
border-radius: 5px;
}
.dropdown-menu > li > div[uib-datepicker] em {
padding: 0 11px 0 12px;
}
/*TODO: Dropdown-menu box-shadow*/
/*******************************************************************************
* Dropdown menu
*/
.dropdown-menu > li.clickable {
border-radius: 3px;
margin: 0 0 3px;
padding: 4px;
}
.dropdown-menu:not([disabled]) > li.clickable:not([disabled]) {
background-color: rgba(0, 0, 0, .15);
/*border: 1px solid rgba(255, 255, 255, .35);*/
}
.dropdown-menu:not([disabled]) > li.clickable:not([disabled]):hover {
background-color: rgba(0, 0, 0, .25);
}
/*******************************************************************************
* General layout
*/
.col-vertical-span {
position: absolute;
left: -15px;
}
/*.square-vertical-span > * {*/
/*width: 100%;*/
/*padding-bottom: 100%;*/
/*}*/
/*.square-vertical-span > * > * {*/
/*position: absolute;*/
/*}*/
.col-container {
padding-left: 0;
padding-right: 0;
}
.flex-container {
align-items: center;
display: flex;
}
.flex-container-start {
align-items: flex-start;
display: flex;
}
.flex-grow {
flex-grow: 1;
}
/*******************************************************************************
* Table row grouping
*/
.table-row-grouping > tbody > tr {
border-left: 1px double var(--off-white);
border-right: 1px double var(--off-white);
}
.table-row-grouping > tbody > tr.row-group-start {
border-top: 4px double var(--off-white);
/*background: linear-gradient(var(--off-white) 0, var(--off-white) 1px, transparent 1px, transparent 2px, var(--off-white) 2px, var(--off-white) 3px, transparent 3px);*/
}
.table-row-grouping > tbody > tr:first-child {
border-top: 1px double var(--off-white);
}
.table-row-grouping > tbody > tr:last-child {
border-bottom: 1px double var(--off-white);
}
.scrollArea table.table-row-grouping tbody tr td:first-child,
.table-row-grouping > tbody > tr > td:first-child {
background-color: var(--main-bg-color);
background-image: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2));
/*border-color: transparent;*/
border: 0 solid transparent;
}
/*.table-row-grouping > tbody > tr > td:last-child {*/
/*border: 0 solid transparent;*/
/*border-right: 1px solid transparent;*/
/*border-image: linear-gradient(to bottom, white 0, white 2px, transparent 2px, transparent 4px, white 4px, white 6px);*/
/*border-image-slice: 1;*/
/*}*/
.centered {
text-align: center;
padding: 2px;
}
.highlighted {
font-weight: 600;
color: var(--off-black);
background-color: var(--off-white);
border: 1px solid var(--off-black);
border-radius: 4px;
padding: 6px;
}
/*******************************************************************************
* Badge
*/
.badge {
border-radius: .5em;
padding: 4px;
}
sup.badge {
min-width: unset;
font-size: 75%;
top: -1em;
margin-left: -.5em;
color: var(--off-white);
background-color: var(--off-black);
}
sub.badge {
min-width: unset;
font-size: 75%;
bottom: -1em;
margin-left: -.7em;
color: var(--off-white);
background-color: var(--off-black);
}
sup.badge.badge-spacer {
opacity: 0;
}
.badged-header {
margin-bottom: 1.5em;
}
/*******************************************************************************
* Toggle
*/
.toggle-slide {
cursor: unset;
}
.toggle-clean .toggle-on,
.toggle-clean .toggle-off,
.toggle-clean .toggle-handle {
font-weight: normal;
}
.toggle-clean .toggle-on.fa,
.toggle-clean .toggle-off.fa,
.toggle-clean .toggle-handle.fa {
font-family: FontAwesome;
}
.toggle-clean .toggle-slide {
background-color: rgba(0, 0, 0, .1);
border: 0 solid;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .4) inset, 0 0 5px 0 rgba(255, 255, 255, .4);
}
.toggle-clean .toggle-off, .toggle-clean .toggle-select .toggle-on,
.toggle-clean .toggle-on, .toggle-clean .toggle-select .toggle-inner .active {
background-color: transparent;
color: var(--off-white);
}
.toggle-clean .toggle-off {
margin-left: -4px;
}
.toggle-clean .toggle-handle {
border: 2px solid rgba(255, 255, 255, .2);
background-color: rgba(0, 0, 0, .25);
cursor: grab;
box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}
.toggle-clean .toggle-slide, .toggle-clean .toggle-handle {
border-radius: 5px;
}
.toggle-clean.round .toggle-slide, .toggle-clean.round .toggle-handle {
border-radius: 1em;
}
.floating-toggle {
position: absolute;
top: 45px;
right: 5px;
}
.floating-toggle .toggle-clean .toggle-slide {
box-shadow: unset;
background-color: transparent;
}
/*******************************************************************************
* Number spinner
*/
input[numbers-only] {
min-width: 4em;
}
.number-spinner.btn,
.number-spinner.btn:focus,
.number-spinner.btn:active,
.number-spinner.btn:focus:active,
.number-spinner {
padding: 0 2px;
margin-left: -2.5em;
font-size: 7px;
font-weight: 900;
border: 1px solid var(--off-black);
background-color: rgba(0, 0, 0, .25);
box-shadow: none;
z-index: 3;
}
.number-spinner.btn:first-child,
.number-spinner.btn:first-child:focus,
.number-spinner.btn:first-child:active,
.number-spinner.btn:first-child:focus:active {
/*margin-bottom: -1px;*/
/*padding-bottom: 1px;*/
/*border-radius: 4px 4px 0 0;*/
margin-bottom: -1px;
padding: 1px 0;
border-radius: 4px 4px 0 0;
}
.number-spinner.btn:last-child,
.number-spinner.btn:last-child:focus,
.number-spinner.btn:last-child:active,
.number-spinner.btn:last-child:focus:active {
/*padding-top: 1px;*/
padding: 1px 0;
border-radius: 0 0 4px 4px;
}
.number-spinner.btn > .fa,
.number-spinner.btn > .el,
.number-spinner.btn > .ion {
padding: 1px;
}
.number-spinner.btn:hover,
.number-spinner.btn:hover:focus,
.number-spinner.btn:hover:active,
.number-spinner.btn:hover:focus:active {
background-color: rgba(0, 0, 0, .25);
}
:not([disabled]) > :not([disabled]) > .number-spinner.btn:not([disabled]):hover,
:not([disabled]) > :not([disabled]) > .number-spinner.btn:not([disabled]):hover:focus,
:not([disabled]) > :not([disabled]) > .number-spinner.btn:not([disabled]):hover:active {
background-color: rgba(0, 0, 0, .45);
box-shadow: inherit;
}
:not([disabled]) > :not([disabled]) > .number-spinner.btn:not([disabled]):hover:focus:active {
background-color: rgba(0, 0, 0, .55);
box-shadow: inherit;
}
.clickable.number-spinner.btn > .fa,
.clickable.number-spinner.btn:hover > .fa,
.clickable.number-spinner.btn:focus > .fa,
.clickable.number-spinner.btn:active > .fa,
.clickable.number-spinner.btn > .el,
.clickable.number-spinner.btn:hover > .el,
.clickable.number-spinner.btn:focus > .el,
.clickable.number-spinner.btn:active > .el,
.clickable.number-spinner.btn > .ion,
.clickable.number-spinner.btn:hover > .ion,
.clickable.number-spinner.btn:focus > .ion,
.clickable.number-spinner.btn:active > .ion {
background: transparent;
border-color: transparent;
}
.input-group .form-control.last-child:first-child,
.input-group .form-control.last-child:not(:first-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
/*.domain-login {*/
/*position: absolute;*/
/*top:0;*/
/*bottom: 0;*/
/*left: 0;*/
/*right: 0;*/
/*margin: auto;*/
/*}*/
/*.domain-login .modal {*/
/*position: relative;*/
/*}*/
.modal {
text-align: center;
bottom: calc(var(--actionbar-height) + var(--padding) + var(--border-width));
}
.modal::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.modal-dialog {
display: inline-block;
vertical-align: middle;
}
.form-horizontal .has-feedback .form-control-feedback {
right: 5px;
font-size: 1.25em;
}
.auto-login {
position: absolute;
right: 0;
top: 0;
margin: 6px;
}
/*******************************************************************************
* Onsen UI
*/
/*@media screen and (max-width: 800px) {*/
/*.actionbar, .actionbar-spacer, .side-bar {*/
/*display: none;*/
/*}*/
/*}*/
.page {
color: inherit;
}
.page, .page__background, .page__content {
background-color: transparent;
}
.toolbar__center {
width: 100%
}
.toolbar__left, .toolbar__right {
width: var(--toolbar-height);
}
.toolbar + .page__background + .page__content {
top: var(--toolbar-height);
}
.toolbar .toolbar__title {
line-height: var(--toolbar-height);
}
.toolbar .toolbar__title img {
display: inline-block;
height: var(--toolbar-height);
width: var(--toolbar-height);
}
.toolbar,
.toolbar .toolbar__left, .toolbar .toolbar__right, .toolbar .toolbar__item {
height: var(--toolbar-height);
line-height: var(--toolbar-height);
}
.toolbar .ons-icon {
font-size: calc(var(--toolbar-height) * .875);
margin: -3px 0;
}
.page--material, .page--material__content,
.page__content h1, .page__content h2, .page__content h3,
.page__content h4, .page__content h5,
.page, .toolbar, .bottom-bar,
.button, .button--quiet, .button--cta,
.button--large--quiet, .button--large--cta,
.button-bar, .button-bar__item, .button-bar__button,
.segment, .segment__item, .segment__button,
.tabbar, .tabbar__item, .tabbar__button, .tabbar__label,
.toolbar-button,
.checkbox, .checkbox__checkmark, .checkbox--noborder,
.radio-button__checkmark,
.list, .list-title, .search-input,
.text-input, .text-input--underbar, .textarea, .textarea--transparent,
.dialog, .alert-dialog, .alert-dialog-title, .alert-dialog-button,
.popover__content, .fab, .modal, .modal__content,
.select-input, .action-sheet, .card, .card__title, .toast {
font-family: inherit;
}
/*ons-row > ons-col {*/
/*padding: 0 10px 0 0;*/
/*}*/
.page__content {
height: inherit;
text-align: center;
/*font-size: 32px;*/
}
ons-row:not(.condensed) {
margin-bottom: 16px;
}
ons-col > ons-input {
width: 100%;
}
.main-image {
display: inline;
height: 192px;
max-width: 192px;
margin: 12px;
}
/*.left {*/
/*text-align: left;*/
/*}*/
/*.right {*/
/*text-align: right;*/
/*}*/
/*.center {*/
/*text-align: center;*/
/*}*/
.page .form-control,
.page .form-control-static,
.ui-select-container,
.text-input {
line-height: 1.25;
font-size: 14px;
font-weight: 400;
width: 100%;
}
.text-input, .text-input:invalid {
background-color: var(--input-bg-color);
border: 1px solid var(--off-black);
border-radius: 4px;
color: var(--off-white);
padding: 6px;
}
.page .ui-select-bootstrap > .ui-select-match > .btn,
.text-input {
height: 2.25em;
}
.btn-default-focus {
color: inherit;
background-color: inherit;
border-color: inherit;
text-decoration: inherit;
outline-offset: inherit;
box-shadow: inherit;
}
.ui-select-toggle > .caret,
.ui-select-bootstrap .ui-select-toggle > .caret {
/*color: var(--off-white);*/
/*right: 6px;*/
/*border-top: 6px dashed;*/
/*border-right: 6px solid transparent;*/
/*border-left: 6px solid transparent;*/
border: 0 solid transparent;
position: absolute;
right: 18px;
margin-top: -12px;
}
.ui-select-toggle > .caret::before,
.ui-select-bootstrap .ui-select-toggle > .caret::before {
font-family: FontAwesome;
font-style: normal;
content: '\f0d7';
font-size: 150%;
}
.ui-select-bootstrap .editable .ui-select-match-text {
margin: -4px 0 0 -4px;
}
.ui-select-bootstrap .editable .ui-select-match-text input {
padding: 3px;
background-color: rgba(0, 0, 0, .2);
}
/*.ui-select-bootstrap .editable .ui-select-match-text,*/
/*.ui-select-bootstrap .editable .ui-select-match-text span {*/
/*width: auto;*/
/*margin-top: -1px;*/
/*}*/
/*:not([disabled]) .clickable:not([disabled]) .ui-select-match-text > .fa,*/
/*:not([disabled]) .clickable:not([disabled]) .ui-select-match-text > .el,*/
/*:not([disabled]) .clickable:not([disabled]) .ui-select-match-text > .ion {*/
/*background-color: rgba(255, 255, 255, .1);*/
/*border-color: rgba(255, 255, 255, .2);*/
/*}*/
/*:not([disabled]) .clickable:not([disabled]) .ui-select-match-text:hover > .fa,*/
/*:not([disabled]) .clickable:not([disabled]) .ui-select-match-text:focus > .fa,*/
/*:not([disabled]) .clickable:not([disabled]) .ui-select-match-text:active > .fa,*/
/*:not([disabled]) .clickable:not([disabled]) .ui-select-match-text:hover > .el,*/
/*:not([disabled]) .clickable:not([disabled]) .ui-select-match-text:focus > .el,*/
/*:not([disabled]) .clickable:not([disabled]) .ui-select-match-text:active > .el,*/
/*:not([disabled]) .clickable:not([disabled]) .ui-select-match-text:hover > .ion,*/
/*:not([disabled]) .clickable:not([disabled]) .ui-select-match-text:focus > .ion,*/
/*:not([disabled]) .clickable:not([disabled]) .ui-select-match-text:active > .ion {*/
/*background: rgba(0, 0, 0, .1);*/
/*border-color: rgba(0, 0, 0, .2);*/
/*}*/
.ui-select-bootstrap .ui-select-choices-group {
background-color: rgba(0, 0, 0, .1);
margin-bottom: 4px;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, .35);
}
.ui-select-bootstrap .ui-select-choices-row {
color: var(--off-black);
}
/*
* Select all .ui-select-choices-row children of .ui-select-bootstrap,
* including the first one, and style them.
*/
.ui-select-bootstrap .ui-select-choices-row {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/*
* Select all but the first .ui-select-choices-row children of
*.ui-select-bootstrap (using the general sibling combinator ~ ),
* and remove/reset the style from the previous rule.
*/
.ui-select-bootstrap .ui-select-choices-row ~ .ui-select-choices-row {
border-radius: 0;
}
.ui-select-bootstrap .ui-select-choices-row:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.ui-select-bootstrap .ui-select-choices-row.active {
color: var(--off-white);
background-color: rgba(0, 0, 0, .15);
}
.ui-select-bootstrap .ui-select-choices-row:hover,
.ui-select-bootstrap .ui-select-choices-row.active:hover {
background-color: rgba(255, 255, 255, .35);
}
.ui-select-bootstrap .ui-select-choices-row > span {
color: inherit;
padding: 3px 8px;
line-height: inherit;
}
.ui-select-bootstrap .ui-select-choices-row > span:focus,
.ui-select-bootstrap .ui-select-choices-row > span:hover,
.ui-select-bootstrap .ui-select-choices-row.active > span {
color: inherit;
background-color: rgba(0, 0, 0, 0);
}
.ui-select-placeholder::-webkit-input-placeholder {
color: var(--off-black);
opacity: .7;
}
.ui-select-placeholder::-moz-placeholder {
color: var(--off-black);
opacity: .7;
}
.ui-select-placeholder:-ms-input-placeholder {
color: var(--off-black);
opacity: .7;
}
.ui-select-placeholder::placeholder {
color: var(--off-black);
opacity: .7;
}
.text-input::-webkit-input-placeholder {
color: var(--off-black);
opacity: .7;
}
.text-input::-moz-placeholder {
color: var(--off-black);
opacity: .7;
}
.text-input:-ms-input-placeholder {
color: var(--off-black);
opacity: .7;
}
.text-input::placeholder {
color: var(--off-black);
opacity: .7;
}
/*.text-input:invalid {*/
/*border: 2px solid var(--cage-remark-color);*/
/*padding: 5px;*/
/*box-shadow: inset 0 0 15px rgba(255, 255, 255, .5), 0 0 15px rgba(255, 255, 255, .5);*/
/*}*/
.has-error .input-group-addon,
.has-error.form-control,
.has-error .form-control {
border-color: #dd0000;
box-shadow: 0 0 1px #dd0000 inset, 0 0 1px #000;
/*background-color: rgba(255, 128, 0, .65);*/
background-color: rgba(255, 160, 40, .85);
/*B57423*/
}
.has-error .date-picker .input-placeholder.text-muted,
.has-error.form-control .text-muted,
.has-error .form-control .text-muted {
color: rgba(0, 0, 0, .55);
}
.has-error .input-group-addon {
color: inherit;
}
.page .number-spinner.btn,
.page .number-spinner.btn:focus,
.page .number-spinner.btn:active,
.page .number-spinner.btn:focus:active,
.page .number-spinner {
font-size: 8px;
}
.toolbar, .bottom-bar {
color: var(--off-black);
background-color: rgba(255, 255, 255, .5);
}
.toolbar-button {
color: inherit;
border: 1px solid;
border-radius: 1em;
margin: 1px;
background-color: rgba(0, 0, 0, .15);
}
.toolbar-button:hover {
background-color: rgba(0, 0, 0, .25);
}
.toolbar-button:active {
opacity: .35;
}
ons-carousel-item {
border: 1px solid rgba(255, 255, 255, .35);
}
.page .form-horizontal {
width: 90%;
min-width: 0;
max-width: 450px;
}
.page .vertical-flex-container2 {
height: inherit;
}
.radio input.checkbox__input[type='radio'],
.radio-inline input.checkbox__input[type='radio'],
.checkbox input.checkbox__input[type='checkbox'],
.checkbox-inline input.checkbox__input[type='checkbox'] {
margin: 0;
}
.form-control.checkbox {
width: auto;
padding: 2px;
}
.form-control.checkbox .checkbox__input,
.form-control.checkbox .checkbox__input:checked {
width: 25px;
height: 25px;
opacity: 0;
}
/*.form-control.checkbox */
.checkbox__label {
vertical-align: middle;
line-height: 2;
margin: auto 6px;
font-size: 14px;
font-weight: normal;
text-shadow: var(--text-shadow-dark);
}
.form-control.checkbox .checkbox__checkmark::before {
border: 0 none;
background-color: transparent;
}
:checked + .checkbox__checkmark::before {
font-family: FontAwesome;
content: '';
font-size: 150%;
margin-top: -2px;
}
.page__content h1, .page__content h2, .page__content h3,
.page__content h4, .page__content h5 {
margin: .25em 0;
}
.form-control.checkbox .checkbox__checkmark::after {
border: 0 none;
}
/*======================================================================*/
.checkbox-container {
display: flex;
}
.checkbox-container input[type='checkbox'] {
display: none;
}
.checkbox-container input[type='checkbox'].form-control + label {
position: relative;
margin: 0 12px 0 0;
width: 30px;
min-width: 30px;
height: 30px;
vertical-align: middle;
font-size: 14px;
font-weight: normal;
text-shadow: var(--text-shadow-dark);
}
/*input[type='checkbox'] + label::before {*/
/*content: '';*/
/*display: inline-block;*/
/*height: 25px;*/
/*width: 25px;*/
/*border: 1px solid;*/
/*}*/
.checkbox-container input[type='checkbox'].form-control:checked + label::before {
font-family: FontAwesome;
content: '';
font-size: 175%;
position: absolute;
left: 0;
top: 0;
text-align: center;
width: 28px;
height: 28px;
}
/*======================================================================*/
.alert-dialog {
color: var(--off-white);
background-color: var(--main-bg-color);
border: 1px solid rgba(255, 255, 255, .35);
box-shadow: 0 6px 12px rgba(0, 0, 0, .3);
width: 400px;
}
.alert-dialog-title {
color: inherit;
text-shadow: var(--text-shadow-dark);
}
.alert-dialog-content {
color: inherit;
background-color: rgba(0, 0, 0, .1);
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 6px;
margin: 8px;
padding: 6px 12px;
}
.alert-dialog-footer {
border-top: 1px solid var(--off-white);
}
.alert-dialog-button {
color: inherit;
background-color: rgba(0, 0, 0, .1);
cursor: pointer;
margin: 8px 4px;
padding: 2px;
border: 1px solid var(--off-black);
border-radius: 6px;
width: auto;
height: auto;
line-height: unset;
}
.alert-dialog-button--rowfooter:first-child {
border: 1px solid var(--off-black);
margin-left: 8px;
}
.alert-dialog-button--rowfooter:last-child {
margin-right: 8px;
}
ons-toast {
max-width: 400px;
margin: auto;
}
.toast {
bottom: 44px;
background-color: rgba(var(--off-black-r), var(--off-black-g), var(--off-black-b), .7);
}
.date-picker {
position: relative;
}
.date-picker .input-placeholder {
position: absolute;
top: 0;
z-index: 5;
font-size: 14px;
height: 2.25em;
line-height: 2.25em;
margin-left: 7px;
}
.img-photo {
height: 90px;
max-width: 120px;
padding: 2px;
background-color: var(--off-white);
}
.subscript {
font-size: smaller;
}
.scaled {
transform: scale(var(--scale));
}
/*******************************************************************************
* Led lights
*/
.led {
--blink-interval: 1s;
/*margin: 0 auto;*/
width: 24px;
height: 24px;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 1em;
background-color: #abb;
text-align: center;
}
.led > * {
margin-top: -2px;
}
.led.blink-fast {
--blink-interval: .5s;
}
.led.blink-faster {
--blink-interval: .75s;
}
.led.blink-slower {
--blink-interval: 1.5s;
}
.led.blink-slow {
--blink-interval: 2s;
}
.led-red:not(.led-multi-color) {
background-color: #A00;
}
.led-red.led-on {
background-color: #F00;
box-shadow: rgba(0, 0, 0, .2) 0 -1px 7px 1px, inset #411 0 -1px 6px, #A00 0 2px 12px;
}
.led-red.led-blink {
animation: blinkRed var(--blink-interval) infinite;
}
@keyframes blinkRed {
from {
/*background-color: #A00;*/
}
50% {
background-color: #F00;
box-shadow: rgba(0, 0, 0, .2) 0 -1px 7px 1px, inset #411 0 -1px 6px, #A00 0 2px 12px;
}
to {
/*background-color: #A00;*/
}
}
.led-yellow:not(.led-multi-color) {
background-color: #AA0;
}
.led-yellow.led-on {
background-color: #FF0;
box-shadow: rgba(0, 0, 0, .2) 0 -1px 7px 1px, inset #880 0 -1px 6px, #FF0 0 2px 12px;
}
.led-yellow.led-blink {
animation: blinkYellow var(--blink-interval) infinite;
}
@keyframes blinkYellow {
from {
/*background-color: #AA0;*/
}
50% {
background-color: #FF0;
box-shadow: rgba(0, 0, 0, .2) 0 -1px 7px 1px, inset #880 0 -1px 6px, #FF0 0 2px 12px;
}
to {
/*background-color: #AA0;*/
}
}
.led-green:not(.led-multi-color) {
background-color: #6A0;
}
.led-green.led-on {
background-color: #AF0;
box-shadow: rgba(0, 0, 0, .2) 0 -1px 7px 1px, inset #340 0 -1px 6px, #6A0 0 2px 12px;
}
.led-green.led-blink {
animation: blinkGreen var(--blink-interval) infinite;
}
@keyframes blinkGreen {
from {
/*background-color: #6A0;*/
}
50% {
background-color: #AF0;
box-shadow: rgba(0, 0, 0, .2) 0 -1px 7px 1px, inset #340 0 -1px 6px, #6A0 0 2px 12px;
}
to {
/*background-color: #6A0;*/
}
}
.led-blue:not(.led-multi-color) {
background-color: #49F;
}
.led-blue.led-on {
background-color: #0EF;
box-shadow: rgba(0, 0, 0, .2) 0 -1px 7px 1px, inset #006 0 -1px 6px, #49F 0 2px 12px;
}
.led-blue.led-blink {
animation: blinkBlue var(--blink-interval) infinite;
}
@keyframes blinkBlue {
from {
/*background-color: #49F;*/
}
50% {
background-color: #0EF;
box-shadow: rgba(0, 0, 0, .2) 0 -1px 7px 1px, inset #006 0 -1px 6px, #49F 0 2px 12px;
}
to {
/*background-color: #49F;*/
}
}
/*******************************************************************************
* Led light Glossy
*/
/*.glossy * {*/
/*z-index: 1;*/
/*}*/
.led-glossy {
position: relative;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
}
.led-glossy::before {
content: '';
height: 60%;
width: 80%;
left: 10%;
display: block;
position: absolute;
border-radius: 1em;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 8%, rgba(255, 255, 255, 0) 100%);
}
/*******************************************************************************
* Xxx
*/
/*.led-gray,*/
/*.led-gray-blink,*/
/*.led-red,*/
/*.led-red-blink,*/
/*.led-orange,*/
/*.led-orange-blink,*/
/*.led-green,*/
/*.led-green-blink,*/
/*.led-yellow,*/
/*.led-yellow-blink,*/
/*.led-blue,*/
/*.led-blue-blink {*/
/*margin: 0 auto;*/
/*width: 24px;*/
/*height: 24px;*/
/*border-radius: 50%;*/
/*}*/
/*.led-gray,*/
/*.led-gray-blink {*/
/*background-color: #aab2bd;*/
/*box-shadow: #aab2bd 0 -1px 6px 1px, inset #656d78 0 -1px 8px, #656d78 0 1px 6px;*/
/*}*/
/*.led-red,*/
/*.led-red-blink {*/
/*background-color: #F00;*/
/*box-shadow: #7D7B80 0 -1px 6px 1px, inset #600 0 -1px 8px, #F00 0 3px 11px;*/
/*}*/
/*.led-orange,*/
/*.led-orange-blink {*/
/*background-color: #FF7000;*/
/*box-shadow: #7D7B80 0 -1px 6px 1px, inset #630 0 -1px 8px, #FF7000 0 3px 11px;*/
/*}*/
/*.led-green,*/
/*.led-green-blink {*/
/*background-color: #80FF00;*/
/*box-shadow: #7D7B80 0 -1px 6px 1px, inset #460 0 -1px 8px, #80FF00 0 3px 11px;*/
/*}*/
/*.led-yellow,*/
/*.led-yellow-blink {*/
/*background-color: #FF0;*/
/*box-shadow: #7D7B80 0 -1px 6px 1px, inset #660 0 -1px 8px, #FF0 0 3px 11px;*/
/*}*/
/*.led-blue,*/
/*.led-blue-blink {*/
/*background-color: #06F;*/
/*box-shadow: #7D7B80 0 -1px 6px 1px, inset #006 0 -1px 8px, #06F 0 3px 11px;*/
/*}*/
/*@-moz-keyframes blinkGray {*/
/*0% {*/
/*background-color: #aab2bd;*/
/*}*/
/*50% {*/
/*background-color: #CBD5E2;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #aab2bd 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #aab2bd;*/
/*}*/
/*}*/
/*@-webkit-keyframes blinkGray {*/
/*0% {*/
/*background-color: #aab2bd;*/
/*}*/
/*50% {*/
/*background-color: #CBD5E2;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #aab2bd 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #aab2bd;*/
/*}*/
/*}*/
/*@keyframes blinkGray {*/
/*0% {*/
/*background-color: #aab2bd;*/
/*}*/
/*50% {*/
/*background-color: #CBD5E2;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #aab2bd 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #aab2bd;*/
/*}*/
/*}*/
/*@-moz-keyframes blinkRed {*/
/*0% {*/
/*background-color: #db212b;*/
/*}*/
/*50% {*/
/*background-color: #db212b;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #db212b 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #db212b;*/
/*}*/
/*}*/
/*@-webkit-keyframes blinkRed {*/
/*0% {*/
/*background-color: #db212b;*/
/*}*/
/*50% {*/
/*background-color: #db212b;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #db212b 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #db212b;*/
/*}*/
/*}*/
/*@keyframes blinkRed {*/
/*0% {*/
/*background-color: #db212b;*/
/*}*/
/*50% {*/
/*background-color: #db212b;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #db212b 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #db212b;*/
/*}*/
/*}*/
/*@-moz-keyframes blinkYellow {*/
/*0% {*/
/*background-color: #FF0;*/
/*}*/
/*50% {*/
/*background-color: #AA0;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #FF0 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #FF0;*/
/*}*/
/*}*/
/*@-webkit-keyframes blinkYellow {*/
/*0% {*/
/*background-color: #FF0;*/
/*}*/
/*50% {*/
/*background-color: #AA0;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #FF0 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #FF0;*/
/*}*/
/*}*/
/*@keyframes blinkYellow {*/
/*0% {*/
/*background-color: #FF0;*/
/*}*/
/*50% {*/
/*background-color: #AA0;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #FF0 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #FF0;*/
/*}*/
/*}*/
/*@-moz-keyframes blinkOrange {*/
/*0% {*/
/*background-color: #FF7000;*/
/*}*/
/*50% {*/
/*background-color: #FFB061;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #FF7000 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #FF7000;*/
/*}*/
/*}*/
/*@-webkit-keyframes blinkOrange {*/
/*0% {*/
/*background-color: #FF7000;*/
/*}*/
/*50% {*/
/*background-color: #FFB061;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #FF7000 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #FF7000;*/
/*}*/
/*}*/
/*@keyframes blinkOrange {*/
/*0% {*/
/*background-color: #FF7000;*/
/*}*/
/*50% {*/
/*background-color: #FFB061;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #FF7000 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #FF7000;*/
/*}*/
/*}*/
/*@-moz-keyframes blinkBlue {*/
/*0% {*/
/*background-color: #5d9cec;*/
/*}*/
/*50% {*/
/*background-color: #2b7bff;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #5d9cec 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #5d9cec;*/
/*}*/
/*}*/
/*@-webkit-keyframes blinkBlue {*/
/*0% {*/
/*background-color: #5d9cec;*/
/*}*/
/*50% {*/
/*background-color: #2b7bff;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #5d9cec 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #5d9cec;*/
/*}*/
/*}*/
/*@keyframes blinkBlue {*/
/*0% {*/
/*background-color: #5d9cec;*/
/*}*/
/*50% {*/
/*background-color: #2b7bff;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #5d9cec 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #5d9cec;*/
/*}*/
/*}*/
/*@-moz-keyframes blinkGreen {*/
/*0% {*/
/*background-color: #80FF00;*/
/*}*/
/*50% {*/
/*background-color: #6cff82;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #80FF00 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #80FF00;*/
/*}*/
/*}*/
/*@-webkit-keyframes blinkGreen {*/
/*0% {*/
/*background-color: #80FF00;*/
/*}*/
/*50% {*/
/*background-color: #6cff82;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #80FF00 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #80FF00;*/
/*}*/
/*}*/
/*@keyframes blinkGreen {*/
/*0% {*/
/*background-color: #80FF00;*/
/*}*/
/*50% {*/
/*background-color: #6cff82;*/
/*box-shadow: rgba(0, 0, 0, .2) 0 -1px 6px 1px, inset #441313 0 -1px 8px, #80FF00 0 1px 0;*/
/*}*/
/*100% {*/
/*background-color: #80FF00;*/
/*}*/
/*}*/
/*.led-gray-blink {*/
/*-webkit-animation: blinkGray .7s infinite;*/
/*-moz-animation: blinkGray .7s infinite;*/
/*-ms-animation: blinkGray .7s infinite;*/
/*-o-animation: blinkGray .7s infinite;*/
/*animation: blinkGray .7s infinite;*/
/*}*/
/*.led-red-blink {*/
/*-webkit-animation: blinkRed .7s infinite;*/
/*-moz-animation: blinkRed .7s infinite;*/
/*-ms-animation: blinkRed .7s infinite;*/
/*-o-animation: blinkRed .7s infinite;*/
/*animation: blinkRed .7s infinite;*/
/*}*/
/*.led-yellow-blink {*/
/*-webkit-animation: blinkYellow .7s infinite;*/
/*-moz-animation: blinkYellow .7s infinite;*/
/*-ms-animation: blinkYellow .7s infinite;*/
/*-o-animation: blinkYellow .7s infinite;*/
/*animation: blinkYellow .7s infinite;*/
/*}*/
/*.led-orange-blink {*/
/*-webkit-animation: blinkOrange .7s infinite;*/
/*-moz-animation: blinkOrange .7s infinite;*/
/*-ms-animation: blinkOrange .7s infinite;*/
/*-o-animation: blinkOrange .7s infinite;*/
/*animation: blinkOrange .7s infinite;*/
/*}*/
/*.led-blue-blink {*/
/*-webkit-animation: blinkBlue .7s infinite;*/
/*-moz-animation: blinkBlue .7s infinite;*/
/*-ms-animation: blinkBlue .7s infinite;*/
/*-o-animation: blinkBlue .7s infinite;*/
/*animation: blinkBlue .7s infinite;*/
/*}*/
/*.led-green-blink {*/
/*-webkit-animation: blinkGreen .7s infinite;*/
/*-moz-animation: blinkGreen .7s infinite;*/
/*-ms-animation: blinkGreen .7s infinite;*/
/*-o-animation: blinkGreen .7s infinite;*/
/*animation: blinkGreen .7s infinite;*/
/*}*/
/*******************************************************************************
* Overlay Scrollbars
*/
.os-theme-app-default {
--os-scrollbar-width: 6px;
--os-scrollbar-min-height: 25px;
--os-scrollbar-transition-time: .3s;
}
.os-theme-app-default > .os-scrollbar::before {
content: '';
display: block;
position: absolute;
/*background: rgba(0, 0, 0, .1);*/
border-radius: .5em;
top: 0;
bottom: 0;
right: 0;
left: 0;
/*border: 1px solid rgba(0, 0, 0, .1);*/
}
.os-theme-app-default > .os-scrollbar:hover,
.os-theme-app-default > .os-scrollbar.active {
--os-scrollbar-width: 10px;
}
.os-theme-app-default > .os-scrollbar:hover::before {
background-color: rgba(0, 0, 0, .15);
}
.os-theme-app-default > .os-scrollbar.active::before {
background-color: rgba(0, 0, 0, .25);
}
.os-theme-app-default > .os-scrollbar-horizontal {
right: var(--os-scrollbar-width);
height: var(--os-scrollbar-width);
}
.os-theme-app-default > .os-scrollbar-vertical {
bottom: var(--os-scrollbar-width);
width: var(--os-scrollbar-width);
}
.os-theme-app-default > .os-scrollbar-vertical {
padding: 2px 0 0;
}
.os-theme-app-default > .os-scrollbar-vertical::before {
top: 2px;
}
.os-theme-app-default > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
margin-top: -1px;
}
.os-theme-app-default > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
min-height: var(--os-scrollbar-min-height);
}
.os-theme-app-default > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle {
min-width: var(--os-scrollbar-min-height);
}
.os-theme-app-default.os-host-rtl > .os-scrollbar-horizontal {
left: var(--os-scrollbar-width);
right: 0;
}
.os-theme-app-default > .os-scrollbar-corner {
height: var(--os-scrollbar-width);
width: var(--os-scrollbar-width);
background-color: transparent;
}
.os-theme-app-default > .os-scrollbar > .os-scrollbar-track {
background-color: transparent;
}
.os-theme-app-default > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
background-color: rgba(var(--off-black-r), var(--off-black-g), var(--off-black-b), .55);
border-radius: .5em;
}
.os-theme-app-default > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover {
background-color: rgba(var(--off-black-r), var(--off-black-g), var(--off-black-b), .65);
}
.os-theme-app-default > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
background-color: rgba(var(--off-black-r), var(--off-black-g), var(--off-black-b), .80);
}
.os-theme-app-default.os-host-transition > .os-scrollbar::before,
.os-theme-app-default.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
transition: background var(--os-scrollbar-transition-time);
}
/*******************************************************************************
* Xxx
*/
.bg-pattern-dot-dark {
--bg-pattern-color: black;
--bg-pattern-shadow: rgba(255, 255, 255, .2);
}
.bg-pattern-dot-light {
--bg-pattern-color: white;
--bg-pattern-shadow: rgba(0, 0, 0, .2);
}
.bg-pattern-dot-dark,
.bg-pattern-dot-light {
--bg-pattern-dot-size: 1px;
--bg-pattern-size: calc(var(--bg-pattern-dot-size) + 2px);
background: radial-gradient(var(--bg-pattern-color) 50%, transparent 50%) 0 0,
radial-gradient(var(--bg-pattern-color) 50%, transparent 50%) var(--bg-pattern-size) var(--bg-pattern-size),
radial-gradient(var(--bg-pattern-shadow) 50%, transparent 50%) 0 1px,
radial-gradient(var(--bg-pattern-shadow) 50%, transparent 50%) var(--bg-pattern-size) 2px;
/*background-color: transparent;*/
background-size: var(--bg-pattern-size) var(--bg-pattern-size);
}
/* TODO: To be removed */
.screensize {
position: absolute;
bottom: 20px;
}
@media screen and (min-width: 1024px) {
ons-page {
max-width: 960px;
margin: auto;
}
}
@media screen and (min-width: 1024px) and (min-height: 960px) {
ons-page {
max-height: 800px;
}
}
body {
scrollbar-color: rgba(var(--off-black-r),var(--off-black-g),var(--off-black-b),1) rgba(var(--off-white-r),var(--off-white-g),var(--off-white-b),.3);
}
.form-group,
.form-group-embedded {
margin-bottom: 12px;
}
.form-group.horizontal-flex-container-stretch {
margin-bottom: 0px;
}
.horizontal-flex-container-stretch {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
}
.form-horizontal.embedded {
height: 100%;
max-width: 100%;
padding: 16px;
}
.form-horizontal.embedded > * {
height: 100%;
display: inline-block;
}
/* ========================================================================== */
.form-horizontal.embedded.app-content > * {
height: 1px;
flex: 1 1 auto;
overflow: auto;
border: 1px solid rgba(255,255,255,.15);
border-radius: 5px;
}
/* body, address, pre, dt, dd,
blockquote footer, blockquote small, blockquote .small,
.table thead > tr > th, .table tbody > tr > th,
.table tfoot > tr > th, .table thead > tr > td,
.table tbody > tr > td, .table tfoot > tr > td,
.form-control, .btn,
.dropdown-menu > li > a, .dropdown-header,
.nav-tabs > li > a, .pagination > li > a, .pagination > li > span,
.thumbnail, .img-thumbnail,
.modal-title,
.popover {
line-height: 1.25;
} */
.table > thead:first-child > tr:first-child > th:first-child {
border-top-left-radius: 4px;
}
.table > thead:first-child > tr:first-child > th:last-child {
border-top-right-radius: 4px;
}
.table > thead:last-child > tr:last-child > th {
border-bottom: 2px solid var(--off-white);
}
.table-condensed {
margin: 0;
border-radius: 4px;
}
.table-condensed > thead.fixed {
position: sticky;
top: 0;
background-color: var(--main-bg-color);
}
.table-condensed > thead.fixed > tr > th::before {
content: "";
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
/* border-top-left-radius: 4px; */
/* border-top-right-radius: 4px; */
/* border-bottom: 2px solid var(--off-white); */
background: rgba(0, 0, 0, .035);
z-index: -1;
}
.table-condensed > thead.fixed > tr:first-child > th:first-child::before {
border-top-left-radius: 4px;
}
.table-condensed > thead.fixed > tr:first-child > th:last-child::before {
border-top-right-radius: 4px;
}
.table-condensed > thead.fixed > tr:last-child > th::before {
border-bottom: 2px solid var(--off-white);
}
/* .table-condensed thead.fixed > tr {
background: rgba(0, 0, 0, .1);
} */
/* .table-condensed thead.fixed > tr:nth-last-child(4n+2) > th {
background: rgba(0, 0, 0, .15);
}
.table-condensed thead.fixed > tr:nth-last-child(4n) > th {
background: rgba(255, 255, 255, .035);
}
.table-condensed thead.fixed > tr:nth-last-child(4n+1),
.table-condensed thead.fixed > tr:nth-last-child(4n+3) {
background: var(--off-white);
height: 1px;
}
.table-condensed thead.fixed > tr:nth-last-child(4n+1) > th,
.table-condensed thead.fixed > tr:nth-last-child(4n+3) > th {
padding: 0;
} */
/* .table-condensed thead.fixed > tr:nth-last-child(even) {
background: rgba(0, 0, 0, .1);
} */
.table-condensed > thead > tr > th {
background-color: rgba(0,0,0,.35);
}
.table-condensed > thead > tr > td,
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td,
.table-condensed > tfoot > tr > th {
vertical-align: middle;
border: 1px solid rgba(0, 0, 0, .15);
min-width: 4em;
/* padding: 5px; */
}
/* .table-condensed tbody > tr > td > input.form-control {
min-width: 4em;
}
.table-condensed thead > tr:nth-last-child(odd),
.table-condensed tbody > tr:nth-child(even) {
background: rgba(0, 0, 0, .1);
}
.table-condensed thead > tr:nth-last-child(even),
.table-condensed tbody > tr:nth-child(odd) {
background: rgba(255, 255, 255, .1);
}
.table-condensed tbody > tr.clickable:nth-child(even):hover,
.table-condensed tbody > tr.clickable:nth-child(even):focus,
.table-condensed tbody > tr.clickable:nth-child(even):active {
background: rgba(0, 0, 0, .2)
}
.table-condensed tbody > tr.clickable:nth-child(odd):hover,
.table-condensed tbody > tr.clickable:nth-child(odd):focus,
.table-condensed tbody > tr.clickable:nth-child(odd):active {
background: rgba(255, 255, 255, .2)
}
.table-condensed thead > tr:nth-last-child(odd) > th.clickable:hover,
.table-condensed thead > tr:nth-last-child(odd) > th.clickable:focus,
.table-condensed thead > tr:nth-last-child(odd) > th.clickable:active,
.table-condensed tbody > tr:nth-child(even) > td.clickable:hover,
.table-condensed tbody > tr:nth-child(even) > td.clickable:focus,
.table-condensed tbody > tr:nth-child(even) > td.clickable:active {
background: rgba(0, 0, 0, .1)
}
.table-condensed thead > tr:nth-last-child(even) > th.clickable:hover,
.table-condensed thead > tr:nth-last-child(even) > th.clickable:focus,
.table-condensed thead > tr:nth-last-child(even) > th.clickable:active,
.table-condensed tbody > tr:nth-child(odd) > td.clickable:hover,
.table-condensed tbody > tr:nth-child(odd) > td.clickable:focus,
.table-condensed tbody > tr:nth-child(odd) > td.clickable:active {
background: rgba(255, 255, 255, .1)
} */
.os-viewport {
border-radius: 5px;
}
<secured-page min-role="'rlUser'"></secured-page>
<!--<action-link action-url="/" action-image="images/rub9.png"-->
<!--min-role="rlVolunteer"></action-link>-->
<h3 class="form-horizontal-header">Fiche <span
ng-if="!appform.$pristine"
class="fa fa-pencil"></span>
</h3>
<form name="appform"
role="form"
class="form-horizontal"
novalidate>
<div class="form-group form-group-sm"
ng-show="showIDs">
<label class="col-sm-2 control-label">Systeem ID</label>
<div class="col-sm-3">
<div class="form-control-static"
ng-bind="guest.id">
</div>
</div>
<label class="col-sm-offset-1 col-sm-2 control-label">Uniek Systeem
ID</label>
<div class="col-sm-3">
<div class="form-control-static"
ng-bind="guest.uuid">
</div>
</div>
<div class="col-sm-1">
<div ng-if="guest.animal && animal.image"
ng-repeat="animal in animals | filter:{'id': guest.animal}:true"
class="col-vertical-span img-rounded img-thumbnail clickable"
ng-click="showImage($event)">
<img class="img-responsive img-rounded"
ng-src={{animal.image}}>
</div>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label">Externe Referentie</label>
<div class="col-sm-4">
<input class="form-control"
ng-model="guest.external_ref"
ng-virtual-keyboard/>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label">Aankomst</label>
<div class="col-sm-2">
<date-picker-input date="guest.entrance"
max-date="guest.exit"
ng-disabled="datePickerEntranceDisabled">
</date-picker-input>
</div>
<div class="col-sm-1">
<div class="clickable"
ng-click="enableField($event, 'datePickerEntranceDisabled', 'Aankomst')">
<label ng-if="datePickerEntranceDisabled && allowUnlockingDisabledFields"
class="control-label fa fa-lock"
aria-hidden="true"></label>
</div>
</div>
<div ng-show="showExit">
<label class="col-sm-offset-1 col-sm-2 control-label">Vertrek</label>
<div class="col-sm-2">
<date-picker-input date="guest.exit"
min-date="guest.entrance"
ng-disabled="datePickerExitDisabled">
</date-picker-input>
</div>
<div class="col-sm-1">
<div class="clickable"
ng-click="enableField($event, 'datePickerExitDisabled', 'Vertrek')">
<label ng-if="datePickerExitDisabled && allowUnlockingDisabledFields"
class="control-label fa fa-lock"
aria-hidden="true"></label>
</div>
</div>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label">Opname reden</label>
<div class="col-sm-2">
<select class="form-control"
ng-model="guest.entrance_reason"
ng-options="entrance_reason.id as entrance_reason.name disable when (!entrance_reason.use_allowed && entrance_reason.id !== guest.entrance_reason) for entrance_reason in entrance_reasons | orderBy : 'name'">
</select>
</div>
<div ng-show="showExit">
<label class="col-sm-offset-2 col-sm-2 control-label">Vertrek
reden</label>
<div class="col-sm-2">
<select class="form-control"
ng-model="guest.exit_reason"
ng-options="exit_reason.id as exit_reason.name disable when (!exit_reason.use_allowed && exit_reason.id !== guest.exit_reason) for exit_reason in exit_reasons | orderBy : 'name'"
ng-disabled="exitReasonDisabled">
</select>
</div>
<div class="col-sm-1">
<div class="clickable"
ng-click="enableField($event, 'exitReasonDisabled', 'Vertrek reden')">
<label ng-if="exitReasonDisabled && allowUnlockingDisabledFields"
class="control-label fa fa-lock"
aria-hidden="true"></label>
</div>
</div>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label">Vindplaats</label>
<div class="col-sm-4">
<input class="form-control"
ng-model="guest.origin"
ng-virtual-keyboard/>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label">Diersoort</label>
<div class="col-sm-2">
<select class="form-control"
ng-model="guest.animal"
ng-options="animal.id as animal.name for animal in animals | filter: animal_filter: true | orderBy: 'name'"
ng-change="animalSelected()">
</select>
</div>
<div class="col-sm-2">
<div class="input-group">
<div class="input-group-addon">
<span class="control-label fa fa-filter"></span>
</div>
<input class="form-control"
type="text"
ng-model="animal_filter"
ng-virtual-keyboard/>
</div>
</div>
<div ng-if="guest.animal">
<label class="col-sm-2 control-label">Streefgewicht</label>
<div ng-repeat="animal in animals | filter:{'id': guest.animal}:true"
ng-if="!animal.ideal_weight_female || animal.ideal_weight_general_male"
class="col-sm-2">
<div class="input-group col-sm-8" disabled>
<div class="input-group-addon">
<span ng-if="!animal.ideal_weight_female"
class="control-label fa fa-venus-mars"></span>
<span ng-if="animal.ideal_weight_female"
class="control-label fa fa-mars"></span>
</div>
<input disabled
class="form-control"
type="text"
ng-model="animal.ideal_weight_general_male"/>
</div>
</div>
<div ng-repeat="animal in animals | filter:{'id': guest.animal}:true"
ng-if="animal.ideal_weight_female"
class="col-sm-2">
<div class="input-group col-sm-8" disabled>
<div class="input-group-addon">
<span class="control-label fa fa-venus"></span>
</div>
<input disabled
class="form-control"
type="text"
ng-model="animal.ideal_weight_female"/>
</div>
</div>
</div>
</div>
<!--<div class="form-group form-group-sm">-->
<!--<label for="quantity"-->
<!--class="col-sm-2 control-label">Aantal</label>-->
<!--<div class="col-sm-1">-->
<!--<div id="quantity"-->
<!--class="form-control-static"-->
<!--ng-bind="guest.unspecifiedSexQuantity + guest.male_quantity + guest.female_quantity">-->
<!--</div>-->
<!--<!–<input id="quantity"–>-->
<!--<!–class="form-control"–>-->
<!--<!–type="number" min="1"–>-->
<!--<!–ng-model="guest.unspecifiedSexQuantity + guest.male_quantity + guest.female_quantity"–>-->
<!--<!–ng-disabled="quantityDisabled"–>-->
<!--<!–ng-virtual-keyboard/>–>-->
<!--<!–ng-model="newQuantity"–>-->
<!--</div>-->
<!--<div class="col-sm-1">-->
<!--<div class="clickable"-->
<!--ng-click="enableField($event, 'quantityDisabled')">-->
<!--<label for="quantity"-->
<!--ng-if="quantityDisabled && allowUnlockingDisabledFields"-->
<!--class="control-label fa fa-lock"-->
<!--aria-hidden="true"></label>-->
<!--</div>-->
<!--</div>-->
<!--<label for="quantity_young_ones"-->
<!--class="col-sm-1 control-label">Jongen</label>-->
<!--<div class="col-sm-1">-->
<!--<input id="quantity_young_ones"-->
<!--class="form-control"-->
<!--type="number" min="0" max="{{newQuantity}}"-->
<!--ng-model="guest.quantity_young_ones"-->
<!--placeholder="0"-->
<!--ng-virtual-keyboard/>-->
<!--</div>-->
<!--</div>-->
<div class="form-group form-group-sm horizontal-flex-container-stretch">
<div class="col-sm-8">
<div class="form-group form-group-sm">
<label class="col-sm-3 control-label">Aantal per geslacht</label>
<div class="col-sm-9 col-container">
<div class="col-sm-3">
<div ng-if="!quantityDisabled">
<div class="input-group">
<div class="input-group-addon">
<span class="control-label fa fa-venus-mars"></span>
</div>
<input class="form-control last-child"
type="number" min="0"
placeholder="0"
ng-model="guest.unspecifiedSexQuantity"
ng-virtual-keyboard/>
</div>
</div>
<div ng-if="quantityDisabled">
<div class="input-group"
ng-disabled="quantityDisabled">
<div class="input-group-addon"
ng-disabled="quantityDisabled">
<span class="control-label fa fa-venus-mars"></span>
</div>
<input class="form-control last-child"
type="number" min="0"
placeholder="0"
ng-value="guest.quantity - guest.male_quantity - guest.female_quantity"
ng-disabled="quantityDisabled"
ng-virtual-keyboard/>
</div>
</div>
</div>
<!--</div>-->
<!--<div class="col-sm-2">-->
<div class="col-sm-3">
<div class="input-group">
<div class="input-group-addon">
<span class="control-label fa fa-mars"></span>
</div>
<input class="form-control last-child"
type="number" min="0"
max="{{quantityDisabled ? guest.quantity - guest.female_quantity : null}}"
placeholder="0"
ng-model="guest.male_quantity"
ng-virtual-keyboard/>
</div>
</div>
<!--</div>-->
<!--<div class="col-sm-2">-->
<div class="col-sm-3">
<div class="input-group">
<div class="input-group-addon">
<span class="control-label fa fa-venus"></span>
</div>
<input class="form-control last-child"
type="number" min="0"
max="{{quantityDisabled ? guest.quantity - guest.male_quantity : null}}"
placeholder="0"
ng-model="guest.female_quantity"
ng-virtual-keyboard/>
</div>
</div>
<div class="col-sm-3">
<div class="clickable"
ng-click="enableField($event, 'quantityDisabled', 'Aantal per geslacht')">
<label ng-if="quantityDisabled && allowUnlockingDisabledFields"
class="control-label fa fa-lock"
aria-hidden="true"></label>
</div>
</div>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-3 control-label">Naam</label>
<div class="col-sm-4">
<input class="form-control"
ng-model="guest.given_name"
ng-virtual-keyboard/>
</div>
<label class="col-sm-2 control-label">Geboortedatum</label>
<div class="col-sm-3">
<date-picker-input date="guest.date_of_birth"
max-date="guest.entrance">
</date-picker-input>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-3 control-label">Chip/Ring/ID</label>
<div class="col-sm-4">
<input class="form-control"
ng-model="guest.id_number"
ng-virtual-keyboard/>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-3 control-label">Extra
info</label>
<div class="col-sm-9">
<input class="form-control"
ng-model="guest.just_comment"
ng-virtual-keyboard/>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-3 control-label">Medicatie</label>
<div class="col-sm-9">
<input class="form-control"
ng-model="guest.medication"
ng-virtual-keyboard/>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-3 control-label">Domein</label>
<div class="col-sm-9 col-container">
<div class="col-sm-3">
<select class="form-control"
ng-model="guest.domain"
ng-options="domain.id as domain.name for domain in domains | orderBy : 'name'"
ng-disabled="domainDisabled">
</select>
</div>
<div class="col-sm-1">
<div class="clickable"
ng-click="enableField($event, 'domainDisabled', 'Domein')">
<label ng-if="domainDisabled && allowUnlockingDisabledFields"
class="control-label fa fa-lock"
aria-hidden="true"></label>
</div>
</div>
<label class="col-sm-2 control-label">Kooi</label>
<div class="col-sm-3">
<select class="form-control"
ng-model="guest.cage"
ng-options="cage.id as cage.name for cage in cages | filter: {'domain': guest.domain}: true | orderBy: 'name'">
</select>
</div>
<div class="col-sm-1">
<div class="clickable"
ng-click="cageContent(cage.id)">
<label class="control-label fa fa-info-circle"
aria-hidden="true"></label>
</div>
</div>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-3 control-label">Menu percentage</label>
<div class="col-sm-9 col-container">
<div class="col-sm-3">
<input class="form-control"
type="number" min="0"
ng-model="guest.menu_percentage"
ng-virtual-keyboard/>
</div>
</div>
<!--<div class="col-sm-1">-->
<!--<label class="control-label">%</label>-->
<!--</div>-->
<!--<label for="menu_percentage_young_ones"-->
<!--class="col-sm-1 control-label">Jongen</label>-->
<!--<div class="col-sm-1">-->
<!--<input id="menu_percentage_young_ones"-->
<!--class="form-control"-->
<!--type="number" min="0"-->
<!--ng-model="guest.menu_percentage_young_ones"-->
<!--ng-virtual-keyboard/>-->
<!--</div>-->
<!--<div class="col-sm-1">-->
<!--<label class="control-label">%</label>-->
<!--</div>-->
</div>
</div>
<ng-include class="col-sm-4 form-group-embedded"
src="'weight_table.html'"></ng-include>
<!--
<div class="col-sm-4 form-group-embedded">
<div class="form-horizontal embedded app-content">
<table class="table table-condensed"
overlay-scrollbar="">
<thead class="fixed">
<tr>
<th>Datum</th>
<th>Gewicht (gram)</th>
<th>
<div class="horizontal-flex-container-center">
<span class="clickable"
ng-click="showChart($event)">
<label class="command-icon fa fa-line-chart"
aria-hidden="true"></label>
</span>
</div>
</th>
</tr>
<tr>
<th>
<date-picker-input
date="newWeightMeasurement.date"
init-date="today"
min-date="guest.entrance"
max-date="guest.exit || today"
date-disabled="isWeightDateDisabled">
</date-picker-input>
</th>
<th>
<input class="form-control"
type="number" min="0"
ng-model="newWeightMeasurement.grams"
ng-virtual-keyboard/>
</th>
<th class="clickable">
<span ng-click="createWeightMeasurement($event, newWeightMeasurement)"
class="command-icon fa fa-plus-square fa-fw"></span>
</th>
</tr>
</thead>
<tbody>
<tr class="clickable"
ng-click="changeWeightMeasurement($event, weightMeasurement)"
ng-repeat="weightMeasurement in guestWeightMeasurements | orderBy: '-date' track by $index">
<td>{{weightMeasurement.date | date: dateFormat}}</td>
<td>
{{weightMeasurement.grams}}
</td>
<td class="clickable">
<span ng-click="deleteWeightMeasurement($event, weightMeasurement)"
class="command-icon fa fa-trash fa-fw"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
-->
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label">Waarschuwing</label>
<div class="col-sm-2">
<div class="checkbox">
<label>
<input type="checkbox"
ng-model="guest.staff_only"
ng-true-value="1"
ng-false-value="0"/>Uitblijven!
</label>
</div>
</div>
<div class="col-sm-2">
<div class="checkbox">
<label>
<input type="checkbox"
ng-model="guest.dangerous"
ng-true-value="1"
ng-false-value="0"/>Gevaarlijk!
</label>
</div>
</div>
<label class="col-sm-2 control-label">Opmerking</label>
<div class="col-sm-4">
<input class="form-control"
ng-model="guest.comment"
ng-virtual-keyboard/>
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label">Adoptie</label>
<div class="col-sm-1">
<div class="checkbox">
<label>
<input type="checkbox"
ng-model="guest.for_adoption"
ng-true-value="1"
ng-false-value="0"/>
</label>
</div>
</div>
<div ng-if="guest.for_adoption === 1">
<label class="col-sm-1 control-label">Vanaf</label>
<div class="col-sm-2">
<date-picker-input date="guest.adoption_from"
min-date="guest.entrance"
max-date="guest.exit">
</date-picker-input>
</div>
<div class="col-sm-2">
<div class="checkbox">
<label>
<input type="checkbox"
ng-model="guest.reserved"
ng-true-value="1"
ng-false-value="0"/>Gereserveerd
</label>
</div>
</div>
<div ng-if="guest.reserved === 1">
<label class="col-sm-1 control-label">Voor</label>
<div class="col-sm-3">
<input class="form-control"
ng-model="guest.reserved_for"
ng-virtual-keyboard/>
</div>
</div>
</div>
</div>
</form>
<div class="form-group form-group-sm form-horizontal-footer">
<button ng-if="!appform.$pristine"
type="button"
ng-click="save()"
class="btn">Bewaren
</button>
<button type="button"
ng-click="back()"
class="btn">Annuleren
</button>
<span ng-if="appform.$pristine && guest.domain !== 0 && guest.uuid">
<button type="button"
ng-if="guest.quantity > 1"
ng-click="split()"
class="btn">Splitsen
</button>
<button type="button"
ng-if="!guest.exit"
ng-click="exit()"
class="btn">Einde verblijf
</button>
<button type="button"
ng-if="!guest.exit"
ng-click="transfer()"
class="btn">Overplaatsen
</button>
</span>
</div>
<form role="form"
class="app-content-body form-horizontal">
<div class="form-horizontal embedded app-content">
<div overlay-scrollbar="">
<table class="table table-condensed">
<!-- overlay-scrollbar=""> -->
<thead class="fixed">
<tr>
<th>Datum</th>
<th>Gewicht (gram)</th>
<th>
<div class="horizontal-flex-container-center">
<span class="clickable"
ng-click="showChart($event)">
<label class="command-icon fa fa-line-chart"
aria-hidden="true"></label>
</span>
</div>
</th>
</tr>
<tr>
<th>
<date-picker-input
date="newWeightMeasurement.date"
init-date="today"
min-date="guest.entrance"
max-date="guest.exit || today"
date-disabled="isWeightDateDisabled">
</date-picker-input>
</th>
<th>
<input class="form-control"
type="number" min="0"
ng-model="newWeightMeasurement.grams"
ng-virtual-keyboard/>
</th>
<th sort-disabled class="clickable">
<span ng-click="createWeightMeasurement($event, newWeightMeasurement)"
class="command-icon fa fa-plus-square fa-fw"></span>
</th>
</tr>
</thead>
<tbody>
<tr class="clickable"
ng-click="changeWeightMeasurement($event, weightMeasurement)"
ng-repeat="weightMeasurement in guestWeightMeasurements | orderBy: '-date' track by $index">
<td>{{weightMeasurement.date | date: dateFormat}}</td>
<td>
{{weightMeasurement.grams}}
</td>
<td class="clickable">
<span ng-click="deleteWeightMeasurement($event, weightMeasurement)"
class="command-icon fa fa-trash fa-fw"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>