/*
This file is part of the Meeds project (https://meeds.io/).
Copyright (C) 2020 Meeds Association
contact@meeds.io
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program; if not, write to the Free Software Foundation,
Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/

//
// Porlet - Application Registry Portlet
// --------------------------------------------------
@import "../../variables.less";
@import "../../mixins.less";

.uiApplicationRegistryPortlet {
	.uiGrayLightBox {
		margin: 20px 10px;
		a.actionIcon {
			color: @textColor;
			[class^="uiIcon"] {
				margin-right: 5px ~'; /** orientation=lt */ ';
				margin-left: 5px ~'; /** orientation=rt */ ';
			}
		}
	}

	.uiBreadcrumb {
		border-bottom: 1px solid @primaryBackgroundHover;
		padding-bottom: 8px;
		margin-bottom: 5px;
	}


	.uiOrganizerCategories {
		padding: 0px 10px 0 30px ~'; /** orientation=lt */ ';
		padding: 0px 0 0 10px ~'; /** orientation=rt */ ';
    max-width: 100%;
    box-sizing: border-box;
		.accordion-group:last-child .accordion-heading{
			border-radius: 0 0 4px 4px ~'; /** orientation=lt */ ';
			border-radius: 0 4px 4px 0 ~'; /** orientation=rt */ ';
		}
		.accordion {
			margin: 0 0 0 10px ~'; /** orientation=lt */ ';
			margin: 0 10px 0 0 ~'; /** orientation=rt */ ';
			width: 250px;
			.heading {
				background: @primaryBackgroundLight;
				padding-right: 5px ~'; /** orientation=lt */ ';
				padding-left: 5px ~'; /** orientation=rt */ ';
				border-top: 1px solid @baseBackground;
				.span8 {
					.text-overflow();
					padding: 5px;
				}
				.span12 {
					.text-overflow();
					padding: 5px;
				}
			}
			a {
				cursor: pointer;
			}
			a:hover {
				color: @linkColor;
			}
			.item {
				padding-right: 5px ~'; /** orientation=lt */ ';
				margin-left: 20px ~'; /** orientation=lt */ ';
				padding-left: 5px ~'; /** orientation=rt */ ';
				margin-right: 20px ~'; /** orientation=rt */ ';
			}
			a.actionIcon {
				margin: 2px 0;
			}
			.accordion-body ul > li > a.pull-left {
				margin-top: 5px;
				max-width: 198px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.clear-position {
				position: static;
			}
		}
		.appWorkingArea {
			margin-left: 280px ~'; /** orientation=lt */ ';
			margin-right: 280px ~'; /** orientation=rt */ ';
			overflow: hidden;
			padding: 20px;
			.uiGrayLightBox {
				margin: 20px 0;
			}
			.title {
				text-transform: capitalize;
			}
			.hintMessage {
				font-style: italic;
				padding: 10px;
				text-align: center;
			}
			.span2 {
				width:80px;
			}
			.offset2 {
				overflow: hidden;
				margin-left: 80px ~'; /** orientation=lt */ ';
				margin-right: 80px ~'; /** orientation=rt */ ';
			}
			.uiApplicationInfo  {
				.UIPermissionForm {
					padding: 20px;
				}

			}
		}
	}
}

.uiPortletManagement {
	 .uiPortletCategories {
		padding: 0px 20px;
		width: auto;
		.accordion {
			margin: 0 0 0 20px ~'; /** orientation=lt */ ';
			margin: 0 20px 0 0 ~'; /** orientation=rt */ ';
			width: 250px;
		}
		.heading {
			background: @primaryBackground;
			line-height: 35px;
		  padding: 0 5px;
		}

		.category {
			background: @primaryBackground;
		  border-top: 1px solid @baseBackground;
		  border-bottom: 0 none;
		  height: 30px;
			p {
				padding: 5px 10px;
			}
		}

		.item {
		  list-style-type: disc;
		  margin: 5px 40px;
		}
	}

	.appWorkingArea {
		margin-left: 290px ~'; /** orientation=lt */ ';
		margin-right: 290px ~'; /** orientation=rt */ ';
		overflow: hidden;
		padding: 20px;
		.span2 {
			width:80px;
		}
		.offset2 {
			overflow: hidden;
			margin-left: 80px ~'; /** orientation=lt */ ';
			margin-right: 80px ~'; /** orientation=rt */ ';
		}
	}
}

.uiGadgetManagement {
	.appWorkingArea {
		margin-left: 290px ~'; /** orientation=lt */ ';
		margin-right: 290px ~'; /** orientation=rt */ ';
		overflow: hidden;
		padding: 20px;
		.span2 {
			width:80px;
		}
		.offset2 {
			overflow: hidden;
			margin-left: 80px ~'; /** orientation=lt */ ';
			margin-right: 80px ~'; /** orientation=rt */ ';
		}
	}
	.accordion-group:first-child {
		.accordion-heading  {
			border-radius: 4px 4px 0px 0px ~'; /** orientation=lt */ ';
			border-radius: 4px 0 0px 4px ~'; /** orientation=rt */ ';
		}
	}
	.accordion-group:last-child{
		.accordion-heading  {
			border-radius: 0px 0px 4px 4px ~'; /** orientation=lt */ ';
			border-radius: 0px 4px 4px 0 ~'; /** orientation=rt */ ';
		}
	}
	.accordion {
		margin: 0 0 0 20px ~'; /** orientation=lt */ ';
		margin: 0 20px 0 0 ~'; /** orientation=rt */ ';
		width: 250px;
		.actionIcon{
		  	margin-top: 2px;
		  }
	}
	.uiGadgetList {
		padding: 0px 20px;
		width: auto;
		.item {
			margin-left: 20px ~'; /** orientation=lt */ ';
			margin-right: 20px ~'; /** orientation=rt */ ';
		  list-style-type: disc;
		  margin-top: 5px;
		}

		.heading {
		  background: @primaryBackground;
		  border-top: 1px solid @baseBackground;
		  border-bottom: 0 none;
		}
		.UIGadgetEditor textarea {
			.size(300px,450px);
		}
	}
}

@media(max-width: 767px) {
	.uiApplicationRegistryPortlet .uiOrganizerCategories .accordion {
	    margin: 20px 0;
	    width: auto;
	}
	.uiApplicationRegistryPortlet .uiOrganizerCategories .appWorkingArea {
		  margin-left: 0px ~'; /** orientation=lt */ ';
		  margin-right: 0px ~'; /** orientation=rt */ ';
	}
	.uiApplicationRegistryPortlet .uiOrganizerCategories {
		 padding: 0 20px ;
	}
}