ITSSTOOLS/datamodels/2.x/itop-portal-base/portal/web/css/portal.scss

@import 'variables.scss';

/*!
 * Combodo portal template v1.0.0
*/

/*******************/
/* Global settings */
/*******************/
@media (max-width: 768px){
	body{
		padding-top: 60px;
	}
	body.home{
		padding-top: 70px;
	}
}
footer{
	margin: 5em 1em;
}

/* Navigation menu */
.navbar-nav .dropdown-menu a .glyphicon,
.user_infos .dropdown-menu a .glyphicon{
	margin-right: 15px;
}
.nav > li > a > span.brick_icon,
.dropdown-menu > li > a > span.brick_icon{
	margin-right: 20px;
	vertical-align: sub;
}
/* Topbar */
#topbar .navbar-header{
	position: relative;
	z-index: 2;
}
#topbar .navbar-collapse{
	position: relative;
	z-index: 1;
	overflow-y: auto;
}
#topbar .navbar-collapse > .navbar-nav{
	padding-top: 30px;
}
#topbar .navbar-brand > img{
	max-height: 100%;
}
#topbar .user_infos{
	text-decoration: none;
}
#topbar .user_photo{
	position: absolute;
	display: block;
	top: 5px;
	left: 10px;
	width: 65px;
	height: 65px;
	background-size: 100%;
	background-position: center center;
	background-color: #585653;
	border: 2px solid $white;
	border-radius: 100%;
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
}
#topbar .user_fullname{
	display: inline-block;
	position: absolute;
	padding-left: 85px;
	max-width: 55%;
	/*color: $white;*/
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
}
/* Sidebar */
@media (min-width: 768px){
	#sidebar{
		position: fixed;
		top: 0px;
		left: 0px;
		padding: 0px; /* Overriding BS */
		height: 100%;
	}
	#sidebar .user_card{
		padding: 30px 0px;
		text-align: center;
	}
	#sidebar .user_card .user_photo{
		margin: 0px auto 10px auto;
		width: 80px;
		height: 80px;
		background-size: 100%;
		background-position: center center;
		background-color: #585653;
		background-repeat: no-repeat;
		border: 2px solid $white;
		border-radius: 100%;
	}
	#sidebar .user_card .user_infos{
		font-size: 1em;
		color: $white;
	}
	#sidebar .user_card .user_infos .dropdown-toggle{
		color: $white;
	}
	#sidebar .user_card .user_options.dropdown-menu{
		width: 92%;
		left: 4%;
	}
	#sidebar .user_card .user_fullname{
		font-weight: 600;
	}
	#sidebar .menu{
		max-height: 59%;
		overflow-y: auto;
		overflow-x: hidden;
	}
	#sidebar .menu .navbar-nav > li{
		width: 100%;
	}
	#sidebar .menu .navbar-nav > li > a > .brick_icon{
		width: 1.2em;
		vertical-align: sub;
		text-align: center;
		margin-right: 10px;
	}
	#sidebar .logo{
		position: absolute;
		bottom: 15px;
		width: 100%;
		text-align: center;
	}
	#sidebar .logo img{
	width: 40%;
	max-width: 100%;
}
}
@media (min-width: 992px){
	
}
/* Warning : Not a offical BS breakpoint */
@media (min-width: 1600px){
	#sidebar .user_card .user_photo{
		width: 120px;
		height: 120px;
	}
	#sidebar .menu .nav > li > a > .brick_icon{
		margin-right: 20px;
	}
}

/* Main content */
@media (min-width: 768px) {
	#main-wrapper{
		margin-top: 20px;
	}
}

/* Overlays*/
.global_overlay{
	z-index: 9999;
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
}
#page_overlay .overlay_content{
	margin-top: 20em;
	width: 100%;
	color: white;
}
.overlay_content{
	text-align: center;
}
.content_loader .icon{
	margin-bottom: 0.3em;
	/*width: 52px;*/
	height: 38px; /* 50px; *//* Hack to make loader circle perfectly */
	font-size: 3em; /* 4em; */
	animation: spin 1.2s linear infinite;
	-webkit-animation: spin 1.2s linear infinite;
	-moz-animation: spin 1.2s linear infinite;
	-ms-animation: spin 1.2s linear infinite;
}
.content_loader .message{
	font-size: 1.5em; /* 2em; */
}

.datatables_overlay{
	padding: 5% 0px !important;
	background-color: white;
}

/******************/
/* Global classes */
/******************/
.vertical-center {
	/* Make it a flex container */
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex; 
  
	/* Align the bootstrap's container vertically */
	-webkit-box-align : center;
	-webkit-align-items : center;
	-moz-box-align : center;
	-ms-flex-align : center;
	align-items : center;
  
	/* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers
	hence the bootstrap's container won't be aligned to the center anymore.
  
	Therefore, we should use the following declarations to get it centered again */
	-webkit-box-pack : center;
	-moz-box-pack : center;
	-ms-flex-pack : center;
	-webkit-justify-content : center;
	justify-content : center;
}

/*********************/
/* Global animations */
/*********************/
/* Spin */
@keyframes spin{
	100% {
		transform: rotate(360deg);
	}
}
@-webkit-keyframes spin{
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes spin{
	100% {
		-moz-transform: rotate(360deg);
	}
}
@-ms-keyframes spin{
	100% {
		-ms-transform: rotate(360deg);
	}
}

/*********************/
/* BS theme override */
/*********************/
.list-group.tree{
	margin-top: 11px;
	margin-bottom: -11px;
}
.list-group.tree .list-group-item{
	padding-right: 0px; /* To align all actions on the right without indent */
}

/* Custom "glyphicons" */
.glyphicon-ext-hierarchy:before {
    content: url('../img/icons/hierarchy-white-13px.png');
}

/******************/
/* Modal settings */
/******************/
.modal-content .content_loader{
	margin: 7em 0em;
	text-align: center;
}

/**************************/
/* MagnificPopup settings */
/**************************/
.mfp-bg{
	z-index: 1200;
}
.mfp-wrap{
	z-index: 1210;
}

/********************/
/* Typeahed setting */
/********************/
.twitter-typeahead .tt-menu{
	max-height: 200px;
	overflow-y: auto;
}
@media (min-width: 768px){
	.twitter-typeahead .tt-menu{
		max-height: 300px;
	}
}

.twitter-typeahead .tt-dataset > .content_loader{
	margin: 10px 0px;
	text-align: center;
	font-size: 0.6em;
}
.twitter-typeahead .tt-dataset > .content_loader .icon{
	height: 25px;
}
.twitter-typeahead .tt-dataset .no_result{
	text-align: center;
	font-style: italic;
}

/*****************/
/* Home settings */
/*****************/
.home #main-wrapper{
	padding-top: 15px;
}

.home .tile{
	display: block;
	margin-bottom: 8px;
	padding: 0em 1em;
	min-height: 4em;
	background-color: $white;
    background-image: none;
    border: none;
	border-radius: 0px;
    text-align: center;
	text-decoration: none;
	white-space: normal;
	line-height: 4em;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.home .tile .tile_decoration{
	position: absolute;
	top: 0.3em;
	left: 2.5em;
}
.home .tile .tile_title{
	font-weight: bold;
	color: #333;
}
.home .tile .tile_description{
	display: none;
	color: #555555;
}
@media (min-width: 768px) {
	.home .tile{
		display: block;
		margin-bottom: 25px;
		padding: 40px 40px 30px 40px;
		min-height: 10em;
		text-align: left;
		transition: all 0.2s linear;
	}
	.home .tile:hover{
		box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.10);
	}
	.home .tile .tile_decoration{
		display: block;
		position: relative;
		float: left;
		top: 1.5em;
		left: initial;
		margin: 0px 30px 15px 0px;
	}
	.home .tile .tile_body{
		display: block;
		padding-left: 4.3em;
		text-align: left;
		line-height: 1.5em;
	}
	.home .tile .tile_title{
		margin-bottom: 1em;
		font-size: 1.0em;
	}
	.home .tile .tile_description{
		display: block;
		text-align: left;
	}
}
@media (min-width: 992px) {
	.home .tile{
		min-height: 14em;
		padding: 30px 40px 30px 40px;
	}
	.home .tile .tile_decoration > span.icon{
		font-size: 4em;
	}
	.home .tile .tile_body{
		padding-left: 6.3em;
	}
	.home .tile .tile_title{
		font-size: 1.4em;
	}
	.home .tile .tile_description{
		font-size: 1.2em;
	}
}
@media (min-width: 1200px) {
	.home .tile{
		margin-bottom: 40px;
		min-height: 15em;
		padding: 40px 50px 30px 50px;
	}
	.home .tile .tile_decoration{
		margin: 0px 40px 15px 0px;
		top: 1.5em;
	}
	.home .tile .tile_decoration > span.icon{
		font-size: 6em;
	}
	.home .tile .tile_body{
		padding-left: 9.1em;
	}
	.home .tile .tile_title{
		font-size: 1.5em;
	}
	.home .tile .tile_description{
		font-size: 1.2em;
	}
}

/********************/
/* Modules settings */
/********************/

#main-header{
	text-align: center;
}
#main-header-title{
	margin-bottom: 15px;
}

#main-header-actions{
	margin-bottom: 15px;
}
/* This is no longer necessary but we keep it just in case */
/*#main-header-actions .btn-group .btn{
	padding: 0em 1.5em;
	line-height: 2.4em;
	font-size: 14px;
	background-image: none;
}*/
@media (min-width: 768px) {
	#main-header:after{
		clear: both;
	}
	#main-header-title{
		float: left;
		margin-bottom: 0px;
		min-height: 6em;
		text-align: left;
	}
	#main-header-actions{
		float: right;
		margin-bottom: 0px;
	}
}

.dataTables_wrapper{
	padding: 10px 10px;
}
#brick_content_toolbar{
	/* margin: 10px 0px 6px 0px; */
	padding: 10px;
}
#brick_content_toolbar > div label{
	font-weight: normal;
	white-space: nowrap;
	text-align: left;
}
#brick_content_toolbar > div label input{
	margin-left: 0.5em;
	display: inline-block;
	width: 130px;
}

/***********************/
/* Brick communication */
/***********************/
/* Home tile */
.home .tile.tile_communication{
    padding: 20px;
	background-color: #EDEDED;
	border: none;
	font-weight: initial;
}
.home .tile_communication .carousel{
	margin-bottom: 0px;
	width: 100%;
	height: 200px;
}

/**********************/
/* Brick user profile */
/**********************/
#user-profile-wrapper .user_profile_picture .content_loader{
	position: absolute;
	z-index: 1;
    top: 0;
    left: 0;
    padding-top: 4em;
    width: 100%;
    height: 100%;
	text-align: center;
	color: white;
    background-color: black;
    opacity: 0.5;
}
#user-profile-wrapper .user_profile_picture .preview{
	display: inline-block;
	position: relative;
	max-width: 175px;
	max-height: 175px;
	overflow: hidden;
}
#user-profile-wrapper .user_profile_picture .preview img{
	max-width: 100%;
	max-height: 100%;
}
#user-profile-wrapper .user_profile_picture .actions{
	display: inline-block;
	vertical-align: top; /*middle;*/
	margin-left: 5px;
}
#user-profile-wrapper .user_profile_picture .actions .btn{
	display: block;
	position: relative;
	margin-bottom: 10px;
}
#user-profile-wrapper .user_profile_picture .actions .btn:last-child{
	margin-bottom: 0px;
}
#user-profile-wrapper .user_profile_picture .actions .btn.btn_edit{
	overflow: hidden;
}
#user-profile-wrapper .user_profile_picture .actions .btn.btn_edit input{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

/****************/
/* Brick browse */
/****************/
/* - Tree mode  */
/****************/
#brick_content_tree{
	position: relative;
}

.list-group-item > .list-group-item-actions{
	/*display: none; Displaying actions only when hovering was not unanimous in the team */
	position: absolute;
	top: 10px;
	right: 10px;
}
.list-group-item:hover > .list-group-item-actions{
	display: block;
}
.list-group-item .list-group-item-actions a:not(:first-child){
	margin-left: 10px;
}
.list-group-item .keep-spinning{
	animation: spin 1s linear infinite;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
}

/* Secondary actions */
table .group-actions{
	position: relative;
}
.list-group-item-actions a.glyphicon-menu-hamburger,
table .group-actions a.glyphicon-menu-hamburger{
	cursor: pointer;
	text-decoration: none;
}
.list-group-item-actions .item-action-wrapper,
table .group-actions .item-action-wrapper
{
	display: none;
	position: absolute;
	z-index: 5;
	bottom: 5px;
	right: 0px;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
}
.list-group-item-actions .item-action-wrapper .glyphicon,
table .group-actions .item-action-wrapper .glyphicon{
	margin-right: 0.6em;
}
.list-group-item-actions .item-action-wrapper.collapse.in,
table .group-actions .item-action-wrapper.collapse.in{
	display: block;
}
.list-group-item-actions .item-action-wrapper .panel-body > p,
table .group-actions .item-action-wrapper .panel-body > p{
	white-space: nowrap;
}
.list-group-item-actions .item-action-wrapper .panel-body > p:last-child,
table .group-actions .item-action-wrapper .panel-body > p:last-child{
	margin-bottom: 0px;
}

#brick_content_empty{
	display: none;
    padding: 40px;
	font-size: 1.3em;
    font-style: italic;
}

/* Loader */
#brick_tree_overlay{
	display: none;
	padding: 8% 0px;
	border-radius: 0px 0px 4px 4px;
	font-size: 1em;
}
/****************/
/* - List mode  */
/****************/


/*********/
/* Forms */
/*********/
.form_field .form_mandatory .control-label:after{
	content: "\002a";
	position: relative;
	left: 3px;
	color: $brand-primary;
	font-size: 0.9em;
}
/* CaseLog field */
.caselog_field_entry{
	border: 1px solid $gray-lighter;
	border-top: none;
}
.caselog_field_entry_header{
	padding: 6px;
	font-size: 1em;
	border-bottom: 1px solid $white;
	background-color: #F2F2F2;
}
.caselog_field_entry_button{
	display: block;
	width: 15px;
    height: 15px;
    text-align: center;
	line-height: 15px;
	font-size: 16px;
    border: 1px solid #a6a6a6;
    border-bottom-color: #979797;
}
.caselog_field_entry_button:hover{
	background-color: #cccccc;
}
.caselog_field_entry_button:before{
	content: "▴";
}
.caselog_field_entry_button.collapsed:before{
	content: "▾";
}
.caselog_field_entry_content{
	margin: 10px;
	overflow-x: auto;
}
/* LinkedSet*/
.form_linkedset_toggler,
.form_linkedset_toggler:hover,
.form_linkedset_toggler:focus{
	margin-left: 0.4em;
	text-decoration: none;
	color: inherit;
}
.form_linkedset_toggler > .text:before{
	content: "(";
}
.form_linkedset_toggler > .text:after{
	content: ")";
}
.form_linkedset_toggler > .glyphicon{
	margin-left: 0.5em;
	font-size: 0.85em;
	color: $combodo-orange;
	transition: transform 0.2s linear;
}
.form_linkedset_toggler > .glyphicon.collapsed{
	transform: rotateZ(-90deg);
}
/* - DataTables : Loader */
.form_linkedset_wrapper .datatables_overlay{
	padding: 8px !important;
}
.form_linkedset_wrapper .overlay_content{
	font-size: 0.6em;
}
.form_linkedset_wrapper .content_loader{
	margin: 0px;
}
.form_linkedset_wrapper .content_loader .icon{
	height: 23px;
}
/* - DataTables : Fit the table in the form */
.form_linkedset_wrapper .dataTables_wrapper{
	margin-bottom: 5px;
	padding: 0px;
}
/* FileUpload */
.fileupload_field_content{
	padding: 8px 23px;
	border: 1px solid $gray-lighter;
	background-color: #F9F9F9;
}
.fileupload_field_content > div{
	margin-bottom: 15px;
}
.attachments_container .attachment {
	height: 95px;
	overflow-x: hidden;
	text-align: center;
}
.attachments_container .attachment:hover {
	background-color: #e0e0e0;
}
.attachments_container .attachment .attachment_name{
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.attachments_container .attachment .btn{
	margin-top: 3px;
}
.upload_container input{
	display: inline;
}
.upload_container .loader{
	visibility: hidden;
	margin-left: 7px;
	font-size: 1.2em;
	animation: spin 1.0s linear infinite;
	-webkit-animation: spin 1.0s linear infinite;
	-moz-animation: spin 1.0s linear infinite;
	-ms-animation: spin 1.0s linear infinite;
}
#drag_overlay{
	display: block;
	top: inherit;
	bottom: 0px;
	height: 0px;
}
#drag_overlay .overlay_content{
	margin-top: 5em;
    width: 100%;
    color: white;
}
#drag_overlay .overlay_content .icon{
	font-size: 3em;
}
#drag_overlay .overlay_content .message{
	font-size: 1.5em;
}
/* Attachments drag & drop zone, only for none mobile devices */
@media (min-width: 768px){
	#drag_overlay.drag_in{
		animation: show-drop-zone 0.3s ease-out forwards;
		-webkit-animation: show-drop-zone 0.3s ease-out forwards;
		-moz-animation: show-drop-zone 0.3s ease-out forwards;
		-ms-animation: show-drop-zone 0.3s ease-out forwards;
	}
	#drag_overlay.drag_out{
		animation: hide-drop-zone 0.3s ease-out forwards;
		-webkit-animation: hide-drop-zone 0.3s ease-out forwards;
		-moz-animation: hide-drop-zone 0.3s ease-out forwards;
		-ms-animation: hide-drop-zone 0.3s ease-out forwards;
	}
	@keyframes show-drop-zone{
		100% {
			height: 20%;
		}
	}
	@-webkit-keyframes show-drop-zone{
		100% {
			height: 20%;
		}
	}
	@-moz-keyframes show-drop-zone{
		100% {
			height: 20%;
		}
	}
	@-ms-keyframes show-drop-zone{
		100% {
			height: 20%;
		}
	}
	@keyframes hide-drop-zone{
		0% {
			height: 20%;
		}
		100% {
			height: 0%;
		}
	}
	@-webkit-keyframes hide-drop-zone{
		0% {
			height: 20%;
		}
		100% {
			height: 0%;
		}
	}
	@-moz-keyframes hide-drop-zone{
		0% {
			height: 20%;
		}
		100% {
			height: 0%;
		}
	}
	@-ms-keyframes hide-drop-zone{
		0% {
			height: 20%;
		}
		100% {
			height: 0%;
		}
	}
}

.form_field .form-control-static img{
	max-width: 100% !important;
	height: initial !important;
}

.form_buttons{
	padding-top: 20px;
	text-align: center;
}
.form_buttons .form_btn_transitions{
	margin-bottom: 20px;
}
.form_buttons .btn .glyphicon{
	margin-right: 0.5em;
}
.form_btn_regular.sticky{
	display: none;
}
@media (min-width: 768px){
	.form_buttons .form_btn_transitions{
		float: left !important;
	}
	.form_buttons .form_btn_regular{
		text-align: right;
	}
	.form_buttons .form_btn_regular btn{
		width: inherit;
	}
	/* Making regular button sticky */
	.form_btn_regular.sticky{
		display: block;
		position: fixed;
		bottom: 5em;
		right: -2px; /* TODO : SASS this to col-xs-12 padding */
		padding: 15px;
		background-color: $white;
		border: 1px solid $gray-lighter;
		border-radius: $border-radius-base;
		transition: right 0.3s;
	}
	.form_btn_regular.sticky.closed{
		right: -75px;
	}
	.form_btn_regular.sticky button{
		display: block;
	}
	.form_btn_regular.sticky button:first-child{
		margin-bottom: 4px;
	}
}

/* CKEditor : Adding BS error feedback */
.form_field div.cke{
    border: 1px solid $gray-lighter;
}
.form_field.has-error div.cke{
	border: 1px solid $state-danger-text;
	border-radius: $border-radius-base;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}
/* CKEditor : Styling notifications based on BS alerts */
.cke_notification{
    position: relative;
	padding: 15px;
    margin-bottom: 18px;
    border: 1px solid transparent;
    border-radius: 4px;
	background-color: $white
}
.cke_notification_close{
	position: absolute;
	top: 2px;
	right: 5px;
}
.cke_notification_message{
	margin-bottom: 0px;
	line-height: 1em;
	font-size: 1em;
}
.cke_notification_success{
	display: none;
	background-color: $alert-success-bg;
    border-color: $alert-success-border;
    color: $alert-success-text;
}
.cke_notification_warning{
    background-color: $alert-warning-bg;
    border-color: $alert-warning-border;
    color: $alert-warning-text;
}

/* DataTables : Selection inputs */
.dataTable.table th span.row_input,
.dataTable.table td span.row_input{
	display: inline-block;
	width: 100%;
	text-align: center;
}