cagettepei/www/css/style.scss

/**

	Cagette.net SASS stylesheet
	Use it with with bootstrap 3

**/

@import url('https://fonts.googleapis.com/css?family=Cabin:400,400i,700');
//@import '_shop';
@import '_map';

/*body{
  background-color:#F8F4E5 !important;    
}*/

h1,h2,h3,h4{
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  font-style: italic;
}

/* buttons */

/*.btn {
  text-transform: uppercase;
  font-size: 14px !important;
  padding : 7px 25px !important;
  font-weight:normal !important;
}

/*.btn-lg{
	font-size: 16px !important;
}

.btn-sm {
  font-size: 12px !important;
  padding : 5px 10px !important;
}

.btn-xs {
  font-size: 11px !important;
  padding : 2px 5px !important;
}

.btn-link {
  text-transform: none;
}*/

a{
	cursor:pointer;
}

/* navigation */
ul.nav li {
  text-transform: uppercase;
  font-size: 14px;
}

/* subnav in contractadmin*/
.nav-pills > li.active > a {
  background-color: #efe9d5 !important;
  color: #e95216 !important;
} 

/* Footer */

#footer {
	background: #84BD55;
	border-radius: 8px;
	padding: 20px;
	ul>li>a {
		color: #333; 
	}
	
	ul {
	  margin: 3px 0 0;
	  padding: 0;
	  text-align: left;
	  list-style: none;
	  font-size: 14px;
	}
	
	.cagsocialmedia li a {
	  color : #fff;
	  font-size:  20px;
	  
	  min-width: 32px;
	  /*height: 32px;*/
	  padding: 2px 0 0;
	  display : inline-block;
	}
	
	.cagsocialmedia {
	  vertical-align: top;
	}

	.cagsocialmedia li {
	  display: inline-block;
	  text-align: center; 
	 
	}

	.cagfb {
	  background-color : #4267B2;
	}

	.cagtwitter {
	  background-color  : #1DA1F2;
	}

	.cagyoutube {
	  background-color  :  #FF0000;
	}

}

#subfooter {
  /*background-color : #313131;
  color : #fff;*/
  text-align: center;
  font-size : 14px;
  padding : 15px 0 25px 0; 
  span {
	  color :#979797;
	  font-size : 11px;
	}
}

.sqlLog{
	margin-top:24px;
	font-size:10px;
	background:#AAA;
	a{ color:#666; }
}

.contact{
	border:2px solid #CCC ;
	border-radius:8px;
	margin:8px;
	padding:8px;
	width:250px;
	min-height: 100px; 	
}

.homeBlock{
	margin-bottom:32px;
	background:#FFF;
	border-radius:8px;
	position: relative;
	padding:8px;
	.content{		
		margin: 8px 8px 8px 90px;

	}
}

//pour les hauts de nav
span.panel-title{
	color:  #966125 !important;
	font-size: 20px !important;
	font-weight:normal !important;	
}

.article{
	margin-bottom:16px;
	background:#FFF;
	border-radius:8px;
	position: relative;
	padding:8px;	
}


.white{
	margin-bottom:16px;
	background:#FFF;
	border-radius:4px;
	position: relative;
}

.disabled{
	opacity: 0.5;
}

/* block marron */
.block{	
	margin-bottom: 12px;
	background : #FFF;
	border-radius : 8px;
	position : relative;
	padding : 8px;
}

/* block marron + contours */
.block2{	
	margin-bottom : 32px;
	background : #F0D277;
	border-radius : 8px;
	position : relative;
	padding : 8px;
	border: 2px solid #C3A04C;
}

/* product in shop */
table.product{
	td{
		padding:8px;
		vertical-align:top;
	}

	width:100%;	
	height:135px;
	overflow:auto;

	.desc{
		font-size:90%;
		color:#666;
	}

	a.productName{
		line-height: 20px;
		display: block;
		font-weight:bold;
	}
}


/* GLOBAL TABLE SKINNING */

//separator between rows
table.table tr.head>td{
	//border-top: 1px solid #BBB;
	border-top: 3px solid #DDD;
	height: 30px;
	font-size:120%;
    vertical-align: bottom; 
}

//sub-row, darker bg
table.table tr.subrow{
	background-color:#EEE;
}

//listing have no overflow
table.listing tr td{
	white-space: nowrap;
	overflow-x:hidden;
}

table.table tr.disabled td,table.table tr.inactive td{
	opacity:0.4;
}


/* DIV TABLE */ 
// used in UserOrder react comp
div.tableHeader{
	font-weight: bold;
    color: #AAA;
    border-bottom: 1px solid #DDD;
    margin-bottom: 12px;
}
	


/*table.table>tbody>tr>th{
	background-color:white;
	color:#BBB;
	border-top:none;
}*/

div.reportHeader{
	background-color:#DDD;
   
}


 
/* a product order in a table style */
.productOrder{
	
	border-bottom:1px solid #DDD;
	margin-bottom:6px;
	
	
	
	.infos{
		color:#AAA;
		font-size:0.8em;
	}
	
	
	
}
/* A product reference */
.ref{
	color:#AAA;
	font-family:monospace;
	font-size:0.9em;
}

/* Link to share */
.linkToShare{
	font-family:Monospace;
	padding: 12px;
    border: 1px solid #DDD;
    border-radius: 6px;
	background-color: #f5f5f5;
}

/* make <a> like clickable divs  */
.clickable{
	display:block;
	border:1px solid #CCC;
	border-radius:8px;
	color:inherit;
	background-color:white;
	margin-bottom:12px;	
	padding:8px;
	
	&:hover{
		cursor: pointer;
		background-color:lighten(#F0D277,10%);
		border-color:darken(#F0D277,10%);
		text-decoration:none;
		transition: all 0.15s ease;
	}
	
	&:active{
		cursor: pointer;
		background-color:#F0D277;
		border-color:darken(#F0D277,10%);
		text-decoration:none;
		transform:scale(0.95);
	}

	&.disabled{
		background-color: lightgray;
		cursor: not-allowed;
	}

}

/* a cagette group block (use it with .clickable ) */
.groupBlock{
	height:110px;
	overflow:hidden;
	vertical-align:top;
	position: relative;
	.address{
		font-size: 0.9em;
	}
	.distance {
		font-weight: bold;
		color: #84bd55;
		font-size: 1.2em;
		position: absolute;
		right: 8px;
		bottom: 6px;
	}
}

/* a cagette pro block (use it with .clickable ) */
.proBlock{
	height:110px;
	overflow:hidden;
	vertical-align:top;
	position: relative;
	background:#bad096;
	&:hover{
		background:darken(#bad096,10%);
	}
	/*span.cpro{
		position: absolute;
		right:0px;
		top:0px;
		background:darken(#bad096,30%);
		color:yellow;
		height: 12px;
		padding:4px;
		font-weight: bold;
	}*/
}

.header{
	.accountBlock{
		a{
			color: #777;
		}
		
	}
}


/*
	SHOP v1
*/
.shop{
	
	.header{
		background-color:#749E3C;
		display:inline-block;
		width:100%;
		
		border-top-left-radius:8px;
		border-top-right-radius:8px;
		padding:12px;
		
		font-size: 16px;
		line-height: 22px;
		
		color:white;
		a{ color:white; }		
		.info{ font-weight: bold; }
	}
	
	
	.body{
		background:white;
		display:inline-block;
		width:100%;
		padding-top: 12px;
		
		.catHeader{
			font-weight:bold;
			font-size:1.2em;
			color:#583816;
			border-bottom:1px solid #CCC;
			width:100%;
		}
	}
	
	
	.product{
		
		display: inline-block;
		
		.name{
			padding-left:8px;
		}
		
		.warning{
			font-size:11px;
			color:#900;
			font-weight:bold;
		}
		
	}

}


.price{
	font-weight:bold;
	font-size:1.3em;
}
	
.vat{
	color:#999999;
	//font-size:80%;
}

.detail{
	color:#999999;
	font-size:90%;

}

//in shop page

#cartContainer.scrolled{
	
	position:fixed;
	top:125px;
}

.cartDiv{
	margin-bottom:16px;
	background:#007700;
	border-radius:8px;
	position: relative;
	padding:8px;
	color:white;
	h2{
		color:white !important;
	}
	a.infos{
		margin-top:8px;
		font-size:12px;
		color:white !important;
		display:block;
	}
	
	#cart{
		
		margin-bottom:12px;
		
		
		div.order{
			margin-bottom:8px;
			
			a{
				margin-right:8px;
			}
		}
		div.total{
			font-size:120%;
			//font-weight:bold;
			margin-bottom:12px;
			margin-top:12px;
			border-top:1px solid #FFF;
		}
		
	}
}


.place{
	color:#666;
	font-weight:bold;
	margin-top:13px;
	padding:8px;
	font-size:13px;
	border-top:1px solid #CCC ;
}

.distribMessage{
	color:#FFF;
	font-weight:bold;
	padding:4px;
	margin-top:13px;
	
	font-size:13px;
	background-color:#080;
	/*border-top:1px solid #333 ;*/
}


.dateBoxOffset{
	position: absolute;
	top: -16px;
	left: -18px;	
	display: block;
}
.dateBox{

	border-radius:8px;
	background-color:#c59654;
	color:#FFF;
	font-size:13px;
	line-height: 13px;
	
	text-align:center;
	vertical-align:middle;	
	
	width: 90px;
	margin:0;
	padding:4px;
	box-shadow: 4px 4px 0px #292929;
	
	.box{
		line-height:22px;
		background-color:#FFFFFF;
		color:#666;
		font-size:14px;
		font-weight:bold;
		text-align:center;
	    margin: 0px;
		border-radius:4px;
	}

	/* place link */
	a{
		color: #FFFFFF !important;
	}
	a:hover{
		color: #FFFFFF !important;
	}
}
 


/* categories */
span.tag{
	color:white;
	font-size:80%;
	//font-weight:bold;
	padding:4px;
	background-color:#666666;
	border-radius:4px;
	line-height: 30px;
}
span.tag.active{
	padding:12px;
	font-size: 16px;
	line-height: 45px;
}


/**
	Popovers for help and tutorials
**/
.popover{

	color:white;
	font-size:14px;
	//font-family:'Arial','sans-serif' !important;
	
	h3.popover-title{
		padding: 4px;
		color:#BB9931 !important;
		border-bottom:1px solid #BB9931 !important;
		background-color:none;
	}
	
	.popover-content{
		font-size: 16px;
		b{ color:#FC0; font-weight:normal; }
	}
	
	
	.footer{

		border-top: 1px solid #BB9931;
		height: 45px;
		padding: 12px 0;
		
		.pull-left .btn{
		
			background-color:#583816;
			color:white;
			border:1px solid white;
		}
		
		.pull-right .btn{
		
			background-color:#FC0;
			color:#583816;
			border:1px solid #583816;
		}
	}
}

/* skin a modal like a tuto popover */ 
.modal.help{
	
	.modal-header{
		font-size: 1.3em;
		color:#BB9931 !important;
		border-bottom:1px solid #BB9931 !important;
		font-weight:bold !important;
		//font-family:'Arial','sans-serif' !important;
		background-color:#583816 !important;	
	}
	
	.modal-content{
		background-color:#583816 !important;
		color:white;
		
	}
	
	.modal-footer{
		border-top:1px solid #BB9931 !important;
	}
	
}
/* hightlight a zone for tutos */
.highlight{
	border: 2px dashed orange;
    border-radius: 16px;
}

 

/* Distribution box for the homepage */
.distrib{
	
	margin: 0px 0px 28px 0px;
	position:relative;
	
	.header{
		
		display: block;
		height: 72px;
		overflow:hidden;
		border-top-left-radius:8px;
		border-top-right-radius:8px;		
		color:#FFF;
		background-color:#749E3C;
		vertical-align:middle;			
		margin:0;
		padding: 6px 6px 6px 90px;
		
		&.disabled{
			background-color:#999;
			opacity: 1;
		}
		&.orders{
			background-color:#B2823F;
		}
		
		.info{
			font-size:16px;
			line-height: 22px;
			/* place link */
			a{
				color: #FFFFFF !important;
				&:hover{ color: #FFFFFF !important; }
			}
			
		}
		
		.date{
			line-height:23px;
			background-color:#FFFFFF;
			color:#666;
			font-size:14px;
			text-align:center;
			margin: 0 8px 0 0;
			border-radius:6px;
			border: 4px solid #C6C6C6;
		}
		
		.address, .closing{
			font-weight:normal;
			font-size:0.9em;
			line-height: 16px;
		}
	}
	
	.myorder{
		font-weight:bold;
		color:#999;
		background:white;
		padding: 11px 0 4px 16px;
	}
	
	.content{
		padding: 6px 6px 6px 6px;
		background-color:#85B14D;
		border-bottom-left-radius:8px;
		border-bottom-right-radius:8px;
		
		&.disabled{
			background:#AAA;
			opacity: 1;
		}
		
		&.orders{
			background:#FFF;
			padding-left: 50px;
		}
		
		.footer{
			color:#999;
			a{color:#999;}
			font-size:0.9em;
			
		}
	}
	
	

}

div.groupImg{
	background:no-repeat center;
	background-size: cover;	
	width: 110px;
	height: 110px;
}

// product thumbnail for shop and home page
div.productImg{
	display:inline-block;
	border-radius: 3px;
	width:70px;
	height:70px;
	margin:4px;
	background:no-repeat center;
	background-size: cover;
	//margin:0;
}

//Product React component
div.product{
	div.productImg{
		margin-right: 12px;
		vertical-align: middle;
	}

}

//Product in ProductSelect React component
div.productSelect{
	/*div.selector{
		width:64px;
		height: 64px;
		display: inline-block;
		cursor: pointer;

		&.active{
			background-color: #007700;
		}

		&:hover{
			background-color: #00AA00;
		}
	}*/

	div.product{
		display: inline-block;
	}

	

}

// Cagette Pro Catalogs
div.productBox{
	
	div.productImg{
		background-size: cover;
		height: 220px;
		width:220px;
		background-position: center center;
		border-radius:6px;
	}
	
	div.productName{
		display:block;
		font-weight:bold;
		color:#967820;
		text-align:center;		
		font-size:1.2em;
		margin-bottom:4px;
	}
	
	.price{
		font-weight:bold;
		text-align:right;
	}
}


// typeahead ( autocomplete js lib )
.tt-menu{
	background-color:#f5e3ac;
}

.tt-suggestion{
	background-color:#f5e3ac;
	padding:8px;
	border-top:1px solid #CCC;
	color:darken(#f5e3ac,60%);
	cursor:pointer;
	font-style:italic;
	&:hover{
		background-color:darken(#f5e3ac,10%);
	}
}

//txp product input
#pInput{
	
	.txpProduct{
		color:#AAA;
		font-weight:bold;
		font-size:0.8em;
		margin:4px 0;
	}
		
	img{
		max-width:100px;
		max-height:100px;
	}
}


//Product composer
/*
div.ProductComp{
	margin:8px 0;
	padding:8px 0;
	border-bottom:solid 1px #CCC;
}

.ComposerApp{
	.add-button{
		vertical-align:top !important;
	}
}
*/

//basket
div.basketNumber{
	
	display:inline-block;
	background-color:#333;
	border-radius: 10px;
    padding: 6px;
	
	font-weight:bold;
	color:#CCC;
	
}

tr.success td div.basketNumber{
	background-color:#070;
	color:white;
}

tr.danger td div.basketNumber{
	background-color:#d9534f;
	color:white;
}

/* fixed bar on bottom for buttons */
.fixedBar{
	position: fixed;
    bottom: 0;
    left: 0;
    background: white;
    width: 100%;
    margin: 0;
    padding: 8px;
	border-top: 3px solid #CCC;
	z-index: 99;
}




/*!
 * https://github.com/YouCanBookMe/react-datetime
 */
.rdt {
  position: relative;
}
.rdtPicker {
  display: none;
  position: absolute;
  width: 250px;
  padding: 4px;
  margin-top: 1px;
  z-index: 99999 !important;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  border: 1px solid #f9f9f9;
}
.rdtOpen .rdtPicker {
  display: block;
}
.rdtStatic .rdtPicker {
  box-shadow: none;
  position: static;
}

.rdtPicker .rdtTimeToggle {
  text-align: center;
}

.rdtPicker table {
  width: 100%;
  margin: 0;
}
.rdtPicker td,
.rdtPicker th {
  text-align: center;
  height: 28px;
}
.rdtPicker td {
  cursor: pointer;
}
.rdtPicker td.rdtDay:hover,
.rdtPicker td.rdtHour:hover,
.rdtPicker td.rdtMinute:hover,
.rdtPicker td.rdtSecond:hover,
.rdtPicker .rdtTimeToggle:hover {
  background: #eeeeee;
  cursor: pointer;
}
.rdtPicker td.rdtOld,
.rdtPicker td.rdtNew {
  color: #999999;
}
.rdtPicker td.rdtToday {
  position: relative;
}
.rdtPicker td.rdtToday:before {
  content: '';
  display: inline-block;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #428bca;
  border-top-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  bottom: 4px;
  right: 4px;
}
.rdtPicker td.rdtActive,
.rdtPicker td.rdtActive:hover {
  background-color: #428bca;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.rdtPicker td.rdtActive.rdtToday:before {
  border-bottom-color: #fff;
}
.rdtPicker td.rdtDisabled,
.rdtPicker td.rdtDisabled:hover {
  background: none;
  color: #999999;
  cursor: not-allowed;
}

.rdtPicker td span.rdtOld {
  color: #999999;
}
.rdtPicker td span.rdtDisabled,
.rdtPicker td span.rdtDisabled:hover {
  background: none;
  color: #999999;
  cursor: not-allowed;
}
.rdtPicker th {
  border-bottom: 1px solid #f9f9f9;
}
.rdtPicker .dow {
  width: 14.2857%;
  border-bottom: none;
}
.rdtPicker th.rdtSwitch {
  width: 100px;
}
.rdtPicker th.rdtNext,
.rdtPicker th.rdtPrev {
  font-size: 21px;
  vertical-align: top;
}

.rdtPrev span,
.rdtNext span {
  display: block;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
}

.rdtPicker th.rdtDisabled,
.rdtPicker th.rdtDisabled:hover {
  background: none;
  color: #999999;
  cursor: not-allowed;
}
.rdtPicker thead tr:first-child th {
  cursor: pointer;
}
.rdtPicker thead tr:first-child th:hover {
  background: #eeeeee;
}

.rdtPicker tfoot {
  border-top: 1px solid #f9f9f9;
}

.rdtPicker button {
  border: none;
  background: none;
  cursor: pointer;
}
.rdtPicker button:hover {
  background-color: #eee;
}

.rdtPicker thead button {
  width: 100%;
  height: 100%;
}

td.rdtMonth,
td.rdtYear {
  height: 50px;
  width: 25%;
  cursor: pointer;
}
td.rdtMonth:hover,
td.rdtYear:hover {
  background: #eee;
}

.rdtCounters {
  display: inline-block;
}

.rdtCounters > div {
  float: left;
}

.rdtCounter {
  height: 100px;
}

.rdtCounter {
  width: 40px;
}

.rdtCounterSeparator {
  line-height: 100px;
}

.rdtCounter .rdtBtn {
  height: 40%;
  line-height: 40px;
  cursor: pointer;
  display: block;

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
}
.rdtCounter .rdtBtn:hover {
  background: #eee;
}
.rdtCounter .rdtCount {
  height: 20%;
  font-size: 1.2em;
}

.rdtMilli {
  vertical-align: middle;
  padding-left: 8px;
  width: 48px;
}

.rdtMilli input {
  width: 100%;
  font-size: 1.2em;
  margin-top: 37px;
}