materio-base-d7/less/guibik.less

@import 'elements.less';

/** table */
@grey:#E0E0E0;
@greylite:#F4F4F4;


/** GENERAL FORM */
a{color:#0092D2;}

table th{background-color: @grey;}

.block,
.item-list,
.help-items ul,
.form-item,
.confirmation ul,
.admin-list,
.node-type-list,
.admin-panel {
  border-width:0px;
  border-style:solid;
  border-color:#fff;
}

.text-format-wrapper .form-item {
  background:#F4F4F4;
  margin:0px 0px 10px;

  border-width:0;
  border-style:solid;
  border-color:#ddd;
  padding: 9px;
  }


.form-item label {
  color:#1A1A1A;
  font-weight:normal;
  font-size:12px;
  text-transform: none;
}

input.form-autocomplete,
input.form-text,
textarea.form-textarea,
select.form-select {
  padding:3px;
  border-width:1px;
  border-style:solid;
  border-color:#BFBFBF;
  background:#fff;
  color:#1A1A1A;
  max-width:100%;
}


span.autocomplete-deluxe-button{top:0.25em;}

.fieldset {
  &.titled{margin:20px 0px 10px!important;}
  display:block;
  position:relative;
  min-height:28px;
  border: 0 solid #eee;
	border-top:1px solid #4C4C4C;
	legend{
		margin-top:-0.9em;
	}
	&.collapsible legend{
		a.fieldset-title{
			padding-right:15px;
			&:after{
				content:"-";
				padding:0 3px 2px;
				margin:-5px 0 0 10px;
				.rounded();
				color:#000;
				background-color: #FFF;
/*				font-size:9px;*/
				line-height:0;
				font-weight:bold;
			}
			&:hover{color:#fff; font-weight:bold;}
		}
	}

	&.collapsed legend{
		a.fieldset-title:after{
			content:"+";
/*			padding:2px 5px 3px;
			.rounded();
			color:#fff;
			background-color: #1A1A1A;
*/		}
	}

}

.tabledrag-processed{
	border:0 solid #fff;
	padding-bottom:2em;
/*	border-top:1px solid #4C4C4C;*/
	thead{
		background-color: transparent;
		label{color:inherit; text-shadow: none; padding:0 0 0 0.5em;}
		th{background-color: transparent; text-transform:uppercase; font-weight:bold;}
	}
}


.item-list h3,
.block .block-title,
.fieldset-title,
.collapsible .fieldset-legend a{
	display:inline-block; width:auto;
	.rounded(); 
	font-size:12px; 
	font-weight:normal;
	text-transform: uppercase;
  margin:0px;
  padding:2px 9px 3px;
  color:#fff;
  background:#666;

}

.block .block-content,
.container-inline .fieldset-content,
.fieldset-content {
  padding:10px 9px 9px;
  background:#F4F4F4;
}

/** popup description */
.page-content .form-item .description {
  color:#fff;
  border-top:1px solid #E0E0E0;
/*	background: #1A1A1A url() no-repeat scroll top left;*/
	background:url(../images/popup.png) 50% 100% no-repeat;
	a{text-decoration: underline;}
}


li{list-style: none inside url();}

/** NODE FORM */
#user-profile-form, .node-form{
	label{text-transform: uppercase; font-size:1em;}

	.fieldset-title,
	.vertical-tab-button strong, .horizontal-tab-button strong{text-transform: uppercase; font-size:0.8em; font-weight:bold;}
	
	div.form-type-checkboxes{
		&>label, &>div.form-checkboxes{.inline-block;}		
	}

	.form-item-language, 	.form-type-select{
		&>label, &>select{.inline-block;}
		&>label{width:35%;}
		&>select{max-width:60%;}
		
	}
	
	.form-type-textfield{
		&>label, &>input.form-text{.inline-block; margin:0; vertical-align:middle;}
		&>label{width:35%;}
		&>input.form-text{max-width:60%;}
	}
	.form-type-link-field{
		&>label, &>input.form-text{.inline-block; margin:0;}
		&>label{width:35%;}
		div{.inline-block; margin:0; width:100%;}
		&>div{width:60%;}
		input.form-text{max-width:100%;}
	}
	.form-phone-number{
		.form-item{.inline-block;}
		input.form-text{width:100%;}
	}
	
	.autocomplete-deluxe-button{
		margin-top:-3px;
	}
	
	.addressfield-container-inline{
		&>div.form-item{.inline-block; margin:0; width:30%;}
	}
	
	fieldset.filter-wrapper{display:none;}
	input.fid.form-text{display:none;}	
	
	.form-region-right{
		position:relative;
		fieldset.form-wrapper{max-width:100%; padding:0; margin:0;}
		.fieldset-wrapper{padding:0;}
		input.form-text{width:100%;}
	}
	
	tr.draggable{
		fieldset{
			legend{display:none;}
			.fieldset-content{
				padding:0;
				.date-padding{padding:0;}
			}
		}
	}
	
	
	.field-widget-term-reference-tree .form-item.form-type-checkbox-tree{
		display: block;
		.term-reference-tree{
			&>ul.term-reference-tree-level{.inline-block; padding:0 2em 0 0; min-width:30%;}
			.term-reference-track-list-container{.inline-block; border-left:1px solid #848484; padding:0 0 2em 1em;}
		}

	}
	
}

/** VERTICAL TABS */
.vertical-tabs {
  background:@greylite;
  border:1px solid #BFBFBF;
  margin:0px 0px 10px;
  position:relative;
}

.vertical-tabs .fieldset-content,
.vertical-tabs fieldset.titled .fieldset-content {
  border:0px;
  padding:10px;
  }
.vertical-tabs .fieldset-content .fieldset-content {
  margin-top: 20px;
}

.vertical-tabs-list li a {
  display:block;
  text-shadow:#fff 0px 1px 0px;
  padding:5px 10px 4px 10px;
  border-bottom:1px solid #BFBFBF;
  border-right:1px solid #BFBFBF;
  color:#494949;
	background: @grey;
  }
.vertical-tabs-list li.last a{
	border-bottom:0px solid #BFBFBF
}
.vertical-tabs-list .selected a ,
.vertical-tabs-list li:hover a {
  background:@greylite;
  color:#1A1A1A;
}
.vertical-tabs-list .selected a{
	border-right:0 solid @greylite;
}
.vertical-tabs-list .summary { font-size:11px; }

.page-admin table tr.even{
  background: #EFEFEF;
}
.page-admin table tr{
	&.even, &.odd{ 
		td, h3 {background-color: transparent;} 
		&:hover{  background: #D4EFEE;}
	}
}


.admin-block-description,
.help-items ul li,
.confirmation ul li,
.item-list ul li,
.prose .item-list li,
.menu li {
  border-bottom:0 solid #f4f4f4;
  }

form .form-actions {
  background:#eee;
  border:0 solid #ddd;
  padding:9px;
}


/** boutons */
input.teaser-button,
input.form-submit,
.node-edit, .button, .node-delete{
  cursor:pointer;
  padding:0.3em 0.9em;
  color:#333;

  text-align:center;
	
	font-size:12px;
  font-weight:normal;
  border-width:1px;
  border-style:solid;
  border-color:#ddd #ddd #ccc;
  background:#bdf url();
	.rounded();
	
	&.field-add-more-submit{
		padding:0.1em 0.4em 0;
		font-size:10px;
	}

		
}
.node-edit, .button, .node-delete{font-size:10px;padding:0.1em 0.6em;}



input.form-submit:hover,
.node-edit:hover, .button:hover, .node-delete:hover{
	border-color:#ddd #ddd #ccc;
  -webkit-box-shadow:#ace 0px 0px 0px;
	
	color:#bdf;
	background-color: #848484;
}

input.button-yes:not(.field-add-more-submit), .node-edit{
	background-color: #CCFF2F;
	&:hover{
		color:#CCFF2F;
	}
}

input.button-no, .node-delete{
	background-color: #EA4B4A;
	&:hover{
		color:#EA4B4A;
	}
	
}

/** admin module */
/**
*
* /!\ CUSTOM HERE /!\
*
* Provide better display for admin menu ==============================
*/
body.admin-vertical #admin-menu{background:#222;background-image:none;}
body.admin-vertical #admin-menu-wrapper{margin-left:35px!important;}
body.admin-vertical.admin-expanded #admin-menu-wrapper{border-left:1px solid #323232;margin-left:260px!important;}
#admin-toolbar{z-index:1000!important;}


/* --- */


/**
 * VIEW
 */
#views-ui-edit-form{
	div.changed {
	  background-color: #FFF98E;
	}

	.views-ui-display-tab-bucket h3{
		font-weight:bold;
		background-color: #D8D8D8;
	}

	.defaulted, .views-ui-display-tab-bucket .views-display-setting.even, .views-ui-display-tab-bucket .views-display-setting.odd{ //:not(.overriden) 
	  color: #666;
		background-color: #E0E0E0;
	  font-style: italic;
	/*	font-weight:bold;*/
		a{color: #3F80B3}
	}	

	.views-ui-display-tab-bucket.overridden .views-display-setting, .views-ui-display-tab-bucket.overridden .views-display-setting,
	.views-display-setting.overridden{ //:not(.overriden) 
		&, &.even, &.odd{
			  color:  #7F7F7F;
				background-color: #F9F9F9;
			  font-style: normal;
			/*	font-weight:bold;*/
				a{color: #3188D1;}
		}
	}	
}
.view{
	.pager{
		padding:1em 0; margin:0; text-align: right; height:auto;
		ul{
			.inline-block; padding:0;
			li{
        height:20px;
				a, span{padding:1px 10px 2px;}				
			}

		}
	}
	
	// EXPOSED
	.view-filters{
		padding:1em 0; margin:0 0 1em 0;
		border: 1px solid  #CCC; .border-radius(5px,5px,5px,5px);
		
		&>span.title, &>form{.inline-block;width:auto;position:relative;vertical-align: top;} 
		&>span.title{padding:0.7em 1em;}
		fieldset{
			 .inline-block; padding:0 1em;
			.fieldset-content{padding:0;}
			legend{display:none;}
		}
/*		.views-exposed-form{ */
			label{font-weight:normal; font-size:0.75em;}
			.form-item{.inline-block;  padding:0 0.5em 0 0;
				select, input{font-size:0.8em;}
			}
/*	 	}*/
	}

	// VBO
	fieldset#edit-select{
		padding:1em 0; margin:0 0 1em 0;
		border: 1px solid  #CCC; .border-radius(5px,5px,5px,5px);
		
		legend, .fieldset-content{.inline-block;}
		
		legend{
			width:auto;
			*{background-color: transparent;}
		}
		
		.fieldset-content{
			padding:0;
			select, input{font-size:0.8em;}
		}
	}
	.vbo-fieldset-select-all{
		width:50%; text-align:left;
		.form-item{.inline-block;vertical-align:top;}
		em{padding:0 1em;}
	}
	
}

/** media browser */
.view.inline-block-list{
	.views-row {
		.inline-block; vertical-align:top;
	  padding: 5px; margin:5px; width:250px; min-height:150px; background-color: #E3E3E3;
		.border-radius(5px,5px,5px,5px); border: 1px solid #ddd;
		.drop-shadow;
		.float-left{
			float:left;
			&>div{margin:0 10px 10px 0;}
		}
		
	}
} 

*:focus{
	border: 1px solid #BDF!important;
}

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


.path-admin-content-nodes span.icon { background-position:0px -30px; }


/** admin view */
.custom-admin{
	table{

		caption{ text-align: left; padding:2em 0 0 0; font-weight:bold;}
		
		th{line-height:1; background-color: @greylite!important;}
		td{padding-top:1em;padding-bottom:1em;}

		td.views-field-field-media{
			width:100px;
			img{max-width:100%; height:auto;}
		}

		&.has-caption{
			th, td.views-field-field-media, td.views-field-views-bulk-operations{
				background: @grey!important;
			}
		}
		
		td.views-field-title{ width:350px; }
		a.node-title-link{font-size:1.1em; padding:0 0 0.3em; display:inline-block;}
		td.views-field-field-people{width:100px;}
	}

}


#modalContent{
		
}

#modalContent div.ctools-modal-content{
	padding:5px;
	-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		
	border: 1 solid #999;
	
}
#modalContent div.ctools-modal-content .modal-header,
#modalContent div.ctools-modal-content .modal-header a,
#modalContent div.ctools-modal-content .modal-header span{
	background-color: transparent; color:#000!important;
}