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 ;
$color1: #BB8757 ;
$color2: #F8F1DD ;

@import "_fonts.scss" ;

html {
    height: 100% ;
}

body {
    position: relative ;
	color: #505050 ;
	font-family: 'Arial' ;
	background-attachment: fixed ;
        min-height: 100%;
        margin: 0;
        padding: 0;
}

strong {
	font-weight: bold ;
}

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

	&:focus, &:active {
		outline-color: gray ;
		color: $color1 ;		
	}
	
	&:hover {
		color: $color1 ;
	}
	
	&.btn {
		text-decoration: none ;
	} 
    }
      
    .btn-primary {
        background-color: $color1 ;
        border: solid 1px $color1 ;
        color: white ;

        &:hover, &:active, &:focus {
            background-color: darken($color1, 5) ;
            border: solid 1px $color1 ;
            color: white ;
        }
    }
    
    .form-control:focus {
        @include box-shadow(none) ;
        border: solid 1px $color1 ;
    }
}

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 ;
		}
	}
}




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

#content .content-text {
    h1 {
        font-family: 'myriadpro-regular' ;
        font-size: 30px ;
        color: black ; 
        text-transform: uppercase ;
    }
    
    h2 {
        font-family: 'comfortaaregular' ;
        font-size: 20px ;
        text-transform: none ;
        padding-bottom: 0px ;
        margin-bottom: 5px ;
        margin-top: 5px ;
    }
}

#content {
    #the-content {
        padding-top: 100px ;
        padding-left: 30px ;
        padding-right: 30px ;
        padding-bottom: 50px ;
    }
}

#block-demo {
    padding: 10px 0px ;
    background-color: $color1 ;
    color: white;
    text-align: center ;
    
    a {
        color: white ;
        text-decoration: underline ;
    }
}

#header {
	z-index: 100 ;
	border-bottom: solid 1px $gris1 ;	
        background-color: #f8f1dd ;
        height: 86px ;

	.container {
		position: relative ;
	}
        
        #env-dev {
            font-family: 'comfortaabold' ;
            text-align: center  ;
            font-size: 18px ;
            padding-top: 10px ;
            padding-bottom: 10px ;
            color: $color1 ;
            background-color: transparent ;
            position: absolute ;
            top: 18px ;
            left: 79px ;
        }

        #link-home {
            position: absolute ;
            top: 10px ;
            left: 0px ;
            text-decoration: none ;
            font-size: 22px ;
            color: black ;
            display: block ;
            
            img {
                height: 60px ;
                margin-bottom: 5px ;
                float: left ;
            }
            
            .text {
                float: left ;
                padding-left: 10px ;
                
                .bap {
                    font-family: "comfortaalight" ;
                    font-size: 24px ;
                }
                
                .plateforme {
                    font-size: 17px ;
                    font-family: "myriadpro-light" ;
                    color: $color1 ;
                }
            }
        }
        
        #link-espace-boulanger {
            border-left: solid 1px #e0e0e0 ;
            color: $color1 ;
        }
        
        nav {
            padding-top: 22px ;
            ul {
                float: right ;
                li {
                    a {
                        text-decoration: none ;
                        color: $courant ;
                        
                        &:hover {
                            color: black ;
                            background-color: white ;
                        }
                    }
                    
                    &.active {
                        a {
                            background-color: white;
                        }
                    }
                    
                    &#link-producteurs {
                        border-right: solid 1px #e0e0e0 ;
                    }
                }
            }
            
            
        }
        
        #link-logout {
            .nom {
                 color: gray;
                font-size: 10px;
                left: 18px;
                position: relative;
                top: -4px;
            }
        }
}

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

#content {
        position: relative ;
	padding: 20px 0px ;
	padding-bottom: 100px ;
	padding-top: 35px ;
	min-height: 500px ;
        
        h1#title-site {
            font-family: "comfortaalight" ;
            font-size: 50px ;
            //border-bottom: 1px solid #e0e0e0 ;
            //font-weight: bold ;
        }
        
        h2 {
            color: black ;
            padding-bottom: 15px ;
            font-size: 25px ;
            line-height: 35px ;
            font-family: 'myriadpro-regular' ;	
            text-transform: uppercase ;
            position: relative ;
            margin-top: 30px ;
        }

        h3 {
            color: black ;
            //font-family: "comfortaalight" ;
            font-size: 20px ;
            //padding-bottom: 12px ;
        }
        
	#description {
		img {
			width: 100% ;
		}
	}
        
        #main-img {
            max-width: 100% ;
            border: solid 1px #e0e0e0 ;
            padding: 5px ;
            @include border-radius(5px) ;
        }
        
        #row-presentation {
            //text-align: center ; 
            h1 {
                color: black ;
            }
            strong {
                font-family: 'myriadpro-light' ;
                font-size: 20px ;
                color: #B17A48 ;
            }
        }
        
        #row-signup {
            text-align: center ;
            margin-top: 40px ;
            padding-top: 40px ;
            
            a.btn {
                padding: 10px 20px ;
                font-size: 20px ;
                text-transform: uppercase ;
            }
            
            a.btn-primary {
                margin-right: 15px ; 
            }
        }

        #row-clients-boulanger {
            margin-bottom: 50px ;
            
            h2 {
                margin-bottom: 10px ;
                .img {
                    height: 50px ;
               }
               span {
                    margin-left: 10px ;
                    font-size: 25px ;
                    position: relative ;
                    top: 5px ;
               }
            }
            
            ul {
                text-align: left ;
                li {
                    list-style-type: circle ;
                    color: $color1 ;
                }
            }
            
            p {
                padding-bottom: 4px ;
            }
            
            .boulanger {
                .prix {
                    span {
                        background-color: $color2 ;
                        
                        a {
                            color: $color1 ;
                            text-decoration: none ;
                        }
                    }
                }
            }
            
            .prix {
                padding-top: 15px ;
                font-size: 18px ;
                
                span {
                    color: $color1 ;
                    //background-color: $color2 ;
                    border: solid 1px $color1 ;
                    font-weight: normal ;
                    font-size: 18px ;
                    font-family: 'comfortaaregular' ;
                    font-family: 'myriadpro-regular' ;
                    text-transform: uppercase ;
                    padding: 10px 15px ;
                    padding-bottom: 7px ;
                    @include border-radius(5px) ;
                }
            }
            
            #periode-essai {
                margin-top: 8px ;
                text-align: center ;
                font-size: 13px ;
                color: gray ;
                font-family: 'comfortaaregular' ;
            }
        }
        
        #btn-demo {
            &:hover, &:focus, &:active {
                color: black ;
            }
        }
        
        #modal-tarifs {
            .commission {
                text-align: center ;
                font-size: 20px ;
                text-transform: uppercase ;
                margin-bottom: 20px ;
                
                span {
                    padding: 10px 20px ;
                    border: solid 1px black ;
                    @include border-radius(10px) ;
                }
            }
            .exemple {
                color: gray ;
            }
        }
}


#content #contact {
	
        display: none ;
    
	.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 {
	position: absolute ;
        bottom: 0px ;
        left: 0px ;
        width: 100% ;
        
	height: 50px ;
        background-color: white ;
	text-align: center ;
	border-top: 1px solid #e0e0e0 ;
        
	padding-top: 30px ;
	padding-bottom: 60px ;
	
	a {
            font-family: 'myriadpro-regular' ;
		color: #7e7e7e;
		color: white ;
                color: #999 ;
                text-transform: uppercase ;
		text-decoration: none ;
		padding-left: 10px ;
                padding-right: 10px ;
                border-right: solid 1px #7e7e7e ;
                border-right: solid 1px white ;
		&:hover {
			color: gray ;
		}
                
                &:last-child {
                    border: 0px none ;
                }
	}
}

#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 ;
}


#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 ;
    }

}

/* login */

.site-login {
    .col-lg-5 {
        margin: 0px auto ;
        float: none ;
    }
}

/* signup */

.modal-backdrop {
  z-index: 999;
}

.site-signup {
    .col-lg-5 {
        margin: 0px auto ;
        float: none ;
    }
    
    
}

#modal-cgv {
    .modal-body {
        h2 {
            margin-bottom: 5px ;
            padding-bottom: 0px ;
            font-size: 20px ;
            margin-top: 0px ;
        }
    }
}

#form-signup {
    #client-boulanger {
        margin-bottom: 30px ;
    }
    
    #signupform-id_etablissement {
        option:disabled {
            font-weight: bold ;
            color: black ;
        }
    }
    
    #champs-boulanger {
        display: none ;
    }
    
    #boutons-inscrire {
        margin-top: 30px;
    }
}

#col-left {
    padding: 0px ;
    z-index: 15 ;
    
    .affix {
        width: 25% ;
        border-right: solid 1px #e0e0e0 ;
        background-color: #FAFAFA ;
        height: 100% ;
    }
    
    #link-home {
        text-decoration: none ;
        font-size: 22px ;
        color: black ;
        display: block ;
        padding: 10px ;
        background-color: $color2 ;
        
        img {
            height: 50px ;
            margin-bottom: 5px ;
            float: left ;
        }

        .text {
            padding-left: 62px ;

            .bap {
                font-family: "comfortaalight" ;
                font-size: 24px ;
            }

            .plateforme {
                font-size: 17px ;
                font-family: "myriadpro-light" ;
                color: $color1 ;
            }
        }
    }
    
    h2 {
        font-family: 'myriadpro-regular' ;
        color: black ;
        margin: 0px ;
        margin-bottom: 10px ;
        padding: 15px 0px 5px 15px ;
    }
    
    #links {
        background-color: white ;
        margin-bottom: 20px ;
        
        ul {
            li {
                a {
                    text-align: center ;
                    border-right: solid 1px #e0e0e0 ;
                    
                    &:hover {
                        background-color: $color1 ;
                        color: white ;
                    }
                }
                
                &:last-child a {
                    border-right: 0px none ;
                }
            }
        }
    }
    
    #producteurs nav.nav-producteurs {
        ul {
            li {
                a {
                    padding-left: 50px ;
                    height: 40px ;
                    //margin-right: 20px ;
                }
                
                &.active a {
                    background-color: $color1 ;
                    position: relative ;
                    color: white ;
                    
                    &:after {
                        right: -40px ;
                        top: 50%;
                        border: solid transparent;
                        content: " ";
                        height: 0;
                        width: 0;
                        position: absolute;
                        pointer-events: none;
                        border-color: rgba(187, 135, 87, 0);
                        border-left-color: #BB8757;
                        border-width: 20px;
                        margin-top: -20px;
                    }
                }
            }
        }
    }
    
    ul {
        list-style-type: none ;
        margin: 0px  ;
        padding: 0px ;
        li {
            margin: 0px ;
            padding: 0px ;
            a {
                text-decoration: none ;
                font-family: 'comfortaaregular' ;
                font-family: 'myriadpro-regular' ;
                font-size: 15px ;
                padding: 10px ;
                border-bottom: solid 1px #e0e0e0 ;
                display: block ;
                color: black ;
                
                span.nom, span.libelle {
                    display: none ;
                }
            }
        }
    }
    
    p {
        padding: 20px ;
        padding-top: 0px ;
        color: gray ;
    }
}

#content {
    .header-title {
        height: 79px ;
        padding: 20px 20px ;
        position: fixed ;
        top: 0px ;
        width: 100% ;
        background-color: white ; 
        z-index: 10 ;
        box-sizing: border-box ;
        border-bottom: solid 1px #e0e0e0 ;
        @include box-shadow(0px 0px 8px #e0e0e0) ;

        h1 {
            color: black ;
            font-family: 'myriadpro-regular' ;
            margin: 0px ;
            font-size: 25px ;
            text-transform: uppercase ;
        }

        h2 {
            color: gray ;
            text-transform: none ;
            font-size: 15px ;
            margin-top: 3px ;
            line-height: 20px ;
        }
    }
}


.header-etablissement {
    z-index: 1 ;
    #block-main-img {
        height: 144px ;
        overflow: hidden ;
        
        #main-img {
            width: 100% ;
            height: auto ;
            border: 0px none ;
            padding: 0px ;
            @include border-radius(0px) ;
        }
    }
    
    h1 {
        font-family: 'comfortaaregular' ;
        text-align: center ;
        position: absolute ;
        top: 30px ;
        left: 40px ;
        
        span {
            background-color: rgba(255, 255, 255, 0.8) ;
            //background-color: rgba(187, 135, 87, 0.6) ;
            //color: white ;
            padding: 10px 30px ;
            border: dotted 1px black ;
            //@include border-radius(20px) ;
        }
    }
}

nav#menu-etablissement {
    border-bottom: solid 1px #e0e0e0 ; 
    //background-color: #FAFAFA ;
    ul {
        li {
            padding: 0px ;
            margin: 0px ;
            a {
                border-right: solid 1px #e0e0e0 ;
                text-decoration: none ;
                @include border-radius(0px) ;
                
                &:hover {
                    background-color: $color1 ;
                    color: white ;
                }
            }
        }
    }
}

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