Souke/frontend/web/sass/screen.scss

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

//@import "compass/reset";
@import "compass" ;

$dir-img: '../img/' ;
$dir-fonts: '../fonts/' ;

$jaune: #fdd44b ;
$orange: darken(#FDB64B,20%) ;
$gris1: #e0e0e0 ;
$gris2: #e0e0e0 ;
$courant: #505050 ;
$color2: lighten($jaune,30%) ;
$color2: #fff2c7 ;
$color2: #fff6d5 ;
 
@import "_fonts.scss" ;

body {
	color: #505050 ;
	font-family: 'Arial' ;
	background-attachment: fixed ;
}

strong {
	font-weight: bold ;
}

a {
	color: $courant ;
	text-decoration: underline ;

	&:focus, &:active {
		outline-color: $jaune ;
		color: black ;		
	}
	
	&:hover {
		color: black ;
	}
	
	&.btn {
		text-decoration: none ;
	}
}

p {
	padding-bottom: 20px ;
	line-height: 21px ;
}

ul {
	padding-left: 20px ;
	list-style-type: disc ;
	margin-bottom: 10px ;
	
	li {
		padding-left: 5px ;
	}
}

.clr {
	clear: both ;
}

.btn {
	background-image: none ;
}

#main .alert {
	background-image: none; 	
        background-color: white ;
        border-bottom-width: 3px ;
}

.alert {
	&.alert-warning {
		a {
			color: #8a6d3b ;
			//text-decoration: none ;
			//font-weight: bold ;
		}
	}
}

#back {
	display: none ;
	position: fixed ;
	top: 100px ;
	left: 0px; 
	width: 100% ;
	height: 100% ;
	background: transparent top center no-repeat url($dir-img+'fournil.jpg') ;
}

.modal.contenu-annexe {
	.modal-title {
		font-family: "comfortaabold" ;
		font-size: 24px ;
		text-transform: uppercase ;
		//font-weight: bold ;
	}	
}


#main {
	position: relative ;
	.inner {
		width: 960px ;
		margin: 0px auto ;
	}
}

#header {
	z-index: 100 ;
	border-top: solid 4px $jaune ;
	border-bottom: solid 1px $gris1 ;	
	background-color: white ;
	height: 100px ;
	@include box-shadow(0px 0px 5px #ededed) ;
	@include box-shadow(0px 0px 5px #dcdcdc) ;
	@include box-shadow(0px 0px 5px black) ;
	
	position: fixed ;
	width: 100% ;

	.container {
		padding-left: 0px ;
		position: relative ;
	}

	#logo {
		img {
			height: 53px ;
		}
		
		a {
			border: 0px none ;
			display: block ;
			height: 56px ;
			width: 205px ;
			padding-right: 0px ;
			
			background: transparent top left no-repeat url($dir-img+'logo-lechatdesnoisettes2.png') ;

			&:hover {
				background: transparent top left no-repeat url($dir-img+'logo-lechatdesnoisettes2-hover.png') ;				
			}
			
			&.selec {
				border: 0px none ;
			}
		}
	}

	h1 {
		font-size: 25px ;
		line-height: 30px ;
		text-align: center ;
		font-family: 'comfortaalight' ;
	}

	h2 {
		font-size: 18px ;
		line-height: 30px ;
		text-align: center ;
		font-family: 'myriadpro-light' ;
	}	

	#logo, nav ul li a {
		padding: 20px 0px ;
	}

	a#link-commander {
		float: right ;
		display: block ;
		//display: none ;
		height: 95px ; 
		padding-left: 15px ;
		padding-right: 15px ;
		line-height: 55px ;
		border-bottom: solid 4px white ;
		@include transition(all 0.2s linear) ;
		text-decoration: none ;
		
		&:hover {
			border-bottom: solid 4px $jaune ;
		}
		
		&:hover, &:active, &:focus, &.selec {
			text-decoration: none ;
			outline: none ;
		}
		
		span {
			//display: none ;
                        font-size: 30px ;
                        position: relative ;
                        top: 40px ;
		}
		
		.icon {
			height: 50px ;
			position: relative ;
			top: 21px ;
		}
	}

	nav {
		//width: 523px ;
		padding: 0px ;
		float: left ;
		
		
		ul {
			list-style-type: none ;
			padding-left: 0px ;
			li {
				float: right ;
 				padding-left: 0px ;
 	
 				//border-right: solid 1px $gris1 ;
				&.first {
					//border-left: solid 1px $gris1 ;	
				}
 				
 
				&.first a  {
										
				}

				a {
					position: relative ;
					color: black;
					display: block ;
					height: 95px ; 
					padding-left: 15px ;
					padding-right: 15px ;
					
					line-height: 55px ;
					color: #333 ;
					border-bottom: solid 4px white ;
					@include transition(all 0.2s linear) ;
					text-decoration: none ;

					&.selec {
						//background-color: $color2 ;
						border-bottom: solid 4px $jaune ;
					}
					
					&:hover {
						border-bottom: solid 4px $jaune ;
					}
					
					&:hover, &:active, &:focus, &.selec {
						text-decoration: none ;
						outline: none ;
					}
					
					span {
						display: none ;
					}

				}
				
				.icon {
					height: 50px ;
					position: relative ;
				}
				
				&.horaires .icon {
					
				}
				
				&.points-vente .icon {
					height: 40px ;
					top: 6px ;
				}
				
				&.gamme .icon {
					height: 65px ;
					top: -2px ;
				}
				
				&.methode .icon {
					height: 40px ;
					top: 5px ;
				}
				
				&.fournisseurs .icon {
					height: 45px ;
					top: 5px ;
				}
				
				&.contact .icon {
					height: 40px ;
					top: 5px ;
				}
			}
		}
	}
	
	
}

#header nav {
	width: 521px ;
	width: 601px ;
	width: 669px ;
	width: 756px ;
}

/*#header nav {
	width: 206px ;
}*/

#main {
	padding: 0px ;
}

.connected {
    #content {
        padding-top: 150px ;
    }
}

#content {
        position: relative ;
	padding: 20px 0px ;
	padding-bottom: 0px ;
	padding-top: 100px ;
	min-height: 500px ;
	
	#description {
		img {
			width: 100% ;
		}
	}

	.item {
		position: relative ;
		min-height: 400px ;

		.container {
			padding: 20px ;
			position: relative ;
		}
		
		.separateur {
			width: 600px ;
			border-top: 1px solid #e0e0e0 ;
			margin: 0px auto ;
			padding-top: 20px ;
			margin-top: 20px ;
		}

		&.back1 {
			//background-color: $color2 ;
			background-color: white ;
		}

		&.back2 {
			background-color: white ;
		}

		&.back1, &.back2 {
		}
		

		h2 {
			color: black ;
			padding-bottom: 50px ;
			font-size: 25px ;
			line-height: 35px ;
			font-family: 'myriadpro-regular' ;	
			text-transform: uppercase ;
			text-align: center ;
			position: relative ;
			margin-top: 30px ;
		}

		h3 {
			color: black ;
			font-family: "comfortaalight" ;
			font-size: 20px ;
			padding-bottom: 12px ;
		}

		.icon {
			position: absolute ;
		}

	}

	.bloc-right {
		float: right ;
		line-height: 23px ;
		background-color: white ;
		padding: 16px ;
		background-color: #f9f9f9 ;
		border-bottom: solid 1px #d8d8d8 ;
		border-left: solid 1px #d8d8d8 ; 
	}

}


#sidebar {
	padding: 0px ;

	.item {		
		padding: 15px ;
		border-bottom: solid 1px $gris1 ;
	}
}

#main #content #presentation {

	h1 {
		text-align: center ;
		font-size: 50px ;
		font-family: 'comfortaabold' ;
		font-family: 'comfortaaregular' ;
		font-family: 'comfortaalight' ;
		padding-bottom: 22px ;
		padding-top: 38px ;
		color: #333 ;
		color: white ;
		//@include text-shadow(0px 0px 4px black) ;
		color: #333 ;
		
		position: relative ;
		top: -20px ;
		width: 600px ;
		margin: 0px auto ;
		/*border-left: solid 1px #e0e0e0 ;
		border-right: solid 1px #e0e0e0 ;*/
		border-bottom: solid 1px #e0e0e0 ;
		@include border-radius(5px) ;
		//@include box-shadow(0px 0px 5px gray) ;
		
	}

	.col-md-6 {
		text-align: center ;
	}

	h2 {
		font-family: 'myriadpro-regular' ;	
		font-size: 35px ;
		line-height: 45px ;
		padding-bottom: 9px ;
		text-transform: none ;
		text-align: left ;
		margin-top: 5px ;
		text-align: center ;
	}

	p {
		line-height: 20px ;
	}

	ul {
		float: right ;
		list-style-type: circle ;
		margin-top: 20px ;

	}

	#fournil, #epicerie {
		position: absolute ;
		top: 160px ; 
		width: 45% ;
		/*height: 141px ;
		height: 155px ;*/
		background-color: white ;
		padding: 20px ;
		border-right: solid 1px $gris1 ;
		border-bottom: solid 1px $gris1 ;
		@include box-shadow(0px 0px 5px black) ;
		border-left: solid 4px $orange ;
		border-left: solid 4px $jaune ;
		
		p {
			line-height: 22px ;
			font-size: 15px ;
		}
	}

	#fournil {
		left: 20px ;
	}

	#epicerie {
		right: 20px ;
	}

}

#horaires {
	
	.icon {
		width: 50px ;
		top: -12px ;
		margin-left: -60px ;
	}
	
	table {
	
		.jour {
			width: 100px ;
			
			span {
				font-size: 12px ;
				line-height: 10px ;
			}
		}

		.horaire {
			text-align: center ;
		}

		th {
			font-weight: bold ;
			text-align: center ;
		}
	}
}

 #content #points-vente {

	.icon {
		width: 50px ;
		top: -12px ;
		margin-left: -60px ;
	}

	iframe {
		width: 100% ;
		height: 400px ;
		border: 0px none ;
	}

	.content {
		padding-left: 50px ;

		ul {
			list-style-type: disc ;
			li {
				line-height: 25px ;
			}
		}
		
		h3.top {
			margin-top: 0px ;
		}

		strong {
			position: relative ;
			font-weight: bold ;
			font-style: none ;

			span {
				position: absolute ;
				left: -12px ;
			}
		}

		.bloc {
			padding-bottom: 20px ;

			address {
				padding-left: 10px ;
				padding-bottom: 10px ;
				line-height: 19px ;
			}
		}
	}
}

.home {
#content #gamme, #content #vrac {
	
	position: relative ;
	
	.icon {
		width: 85px ;
		top: -23px ;
		margin-left: -95px ;
	}
	
	.img-right {
		position: absolute ;
		right: 0px ;
		top: 590px ;
		width: 465px ;
	}

	.table, .produits {
		width: auto ;
		
		td {
			//text-align: center ;
			width: 291px ;
			height: 120px ;
		}
		
		div.vrac {
			padding-left: 0px ;
			width: 280px ;
			height: 130px ;
			float: left ;
			padding-right: 42px ;
			
			span.prix {
				font-weight: normal ;
			}
		}
		
		img {
			//height: 70px ;
			width: 71px ;
		}
		
		.illu {
			float: left ;
			margin-right: 15px ;
		}
		
		.nom {
			font-weight: bold ;
			font-family: "comfortaalight" ;
			text-transform: uppercase ;
			font-size: 18px ;
		}
		
		
		
		p.nom {
			padding-bottom: 2px ;
			margin-bottom: 0px ;
		}
		p.description {
			font-family: "comfortaalight" ;
			text-transform: uppercase ;
			font-size: 15px ;
			margin-bottom: 0px ;
			padding-bottom: 0px ;
		}
		
		p.jours {
			margin-top: 10px ;
			margin-bottom: 0px ;
			padding-bottom: 0px ;
			font-size: 11px; 
			//font-style: italic ;
			text-transform: uppercase ;
		}
		
		a {
			text-decoration: none ;
			
			&:hover {
				color: $courant ;
			}
		}
		
		.contenu {
			padding-left: 86px ;
		}
		
	}

	.table > thead > tr > th, 
	.table > tbody > tr > th, 
	.table > tfoot > tr > th, 
	.table > thead > tr > td, 
	.table > tbody > tr > td, 
	.table > tfoot > tr > td {
		border-top: 0px none ;
		//border-bottom: 1px solid #DDDDDD ;		
	}
	
	.saison {
		display: none ;
	}

	ul#tab-gamme-saison {
		li {
			a {
				color: #333 ;
				text-decoration: none ;
			}
			&.active a {
				
			}
		} 
	}
	
	.modal-dialog {
		.modal-title {
			text-align: left ;
			
			.nom  {
				font-family: "comfortaalight" ;
				font-weight: bold ;
				text-transform: uppercase ;
				font-size: 24px ;
			}
			
			.description {
				font-style: italic;
			}
			
		}
		
		p.recette {
			padding-bottom: 0px ;
			margin-bottom: 0px ;
		}
		
		.modal-body {
			text-align: center ;
			
			.illustration {
				width: 200px ;
				height: auto ;
			}
			
			.photo {
				width: 500px ;
			}
			
			.credit {
				text-align: right ;
				font-style: italic ;
				font-size: 13px ;
			}
		}
	}
	
	#fournisseurs, 
	#panification {
		.modal-dialog .modal-body {
			text-align: left ;
		}
	}
}
}

#content #methode {
	.icon {
		width: 60px ;
		margin-left: -75px ;
		top: -12px ;
	}
	
	.img {
		max-width: 100% ;
		float: right ;
		margin-left: 20px ;
	}
	
	.logo-np {
		float: left ;
	}
	
}

#content #fournisseurs {
	.icon {
		width: 49px ;
		margin-left: -62px ;
		top: -12px ;
	}
	
	iframe {
		width: 100% ;
		height: 400px ;
		border: 0px none ;
	}
	
	h3.top {
		margin-top: 0px ;
	}
	
	address {
		position: relative ;
		padding-left: 10px ;
		padding-bottom: 10px ;
		line-height: 19px ;
		
		strong {
			position: relative ;
			font-weight: bold ;
			font-style: none ;

			span {
				position: absolute ;
				left: -12px ;
			}
		}
	}
	
	address {
		.logo-ab, .logo-np {
			position: absolute ;
			top: 3px ;
			right: 20px ;
			height: 30px ;
		}
	}
}

#content #contact {
	
	.icon {
		width: 55px ;
		top: -15px ;
		margin-left: -70px ;
	}
	
	#par-telephone {
	}

	.form-control:focus {
		@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $jaune) ;
		border-color: $jaune ;
	}
	
	.form-group {
		text-align: center ;
	}
	
	.img-right {
		float: right ;
		
		img {
			width: 300px ;
		}
	}
	
}

.form-control:focus {
		@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px $jaune) ;
		border-color: $jaune ;
}

#footer {
	
	height: 50px ;
	
	background-color: white ;
	
	//border-left: solid 10px $jaune ;
	
	text-align: center ;
	border-top: 1px solid #e0e0e0 ;
	
	padding-top: 30px ;
	padding-bottom: 60px ;
	
	position: relative ;
	
	a {
		color: #7e7e7e;
		text-transform: uppercase ;
		text-decoration: none ;
		
		&:hover {
			color: black ;
		}
	}
}

#content #mentions {
	padding-top: 20px ;

	div.content {
		width: 60% ;
		font-size: 90% ;
	}

	p {
		padding-bottom: 15px ;
	}

	h2 {
		color: black ;
		padding-bottom: 40px ;
		font-size: 25px ;
		line-height: 35px ;
		font-family: 'myriadpro-regular' ;	
	}
	
	h3 {
		font-family: "comfortaaregular" ;
		font-size: 18px ;
		padding-bottom: 12px ;
		margin-top: 10px ;
		color: black ;
	}
}

.mentions {
	
	#main, body {
		background-color: white ;
	}
}

.vegas-loading {
	display: none ;
}

/* message fermeture */

#message-fermeture {
    text-align: center ;
    font-size: 15px ;
    
    padding: 15px ;
    margin: 20px 0px ;
    border: solid 1px #e0e0e0 ;
    border-left: solid 5px $jaune ;
    @include box-shadow(0px 0px 5px #e0e0e0) ;
    
    .ferme {
        //text-transform: uppercase ;
    }
    
    .line1 {
        font-family: "myriadpro-regular" ;
        font-size: 20px ;
    }
    
    .line2 {
        font-size: 13px ;
    }
    
    span {
        font-style: italic ;
    }
}

/* menu user */


#menu-user2 {
    display: none ;
    position: fixed ;
    top: 121px ;
    top: 99px ;
    right: 0px ;
    background-color: white ;
    z-index: 100 ;
    
    .dropdown-toggle {
        @include border-radius(0px 0px 4px 4px) ;
    }
    
    li {
        padding-left: 0px ;
    }
    
    a {
        text-decoration: none ;
    }
    
}

#menu-user {

    background-color: white ;
    border-bottom: solid 1px #e0e0e0 ;
    position: fixed ;
    top: 99px ;
    z-index: 90 ;
    width: 100% ;
    
    .container {
        //height: 50px ;
        padding-left: 0px ;
        ul {
            li {
                list-style-type: none ;
                float: left ;
                border-right: solid 1px #e0e0e0 ;
                padding-left: 0px ;
                a {
                    text-decoration: none ;
                    
                    &:hover, &.active {
                        background-color: #F9F9F9 ;
                    }
                }
            }
        }
    }   
}

#profil-user {

    .form-group.field-user-no_mail label  {
        font-weight: normal ;
    }
    
    .form-group label {
        cursor: pointer ;
    }

    #mails-jours-prod {
        .form-group {
            float: left ;
            margin-right: 15px ;
            label {
                font-weight: normal ;
            }
        }
    }
    
    p.strong {
        font-weight: bold ;
    }

}

@import "_systeme_commandes.scss" ;
@import "_responsive.scss" ;