Opendistrib/frontend/web/sass/screen.scss

/** 
Copyright La boîte à pain (2018) 

contact@laboiteapain.net

Ce logiciel est un programme informatique servant à aider les producteurs 
à distribuer leur production en circuits courts. 

Ce logiciel est régi par la licence CeCILL soumise au droit français et
respectant les principes de diffusion des logiciels libres. Vous pouvez
utiliser, modifier et/ou redistribuer ce programme sous les conditions
de la licence CeCILL telle que diffusée par le CEA, le CNRS et l'INRIA 
sur le site "http://www.cecill.info".

En contrepartie de l'accessibilité au code source et des droits de copie,
de modification et de redistribution accordés par cette licence, il n'est
offert aux utilisateurs qu'une garantie limitée.  Pour les mêmes raisons,
seule une responsabilité restreinte pèse sur l'auteur du programme,  le
titulaire des droits patrimoniaux et les concédants successifs.

A cet égard  l'attention de l'utilisateur est attirée sur les risques
associés au chargement,  à l'utilisation,  à la modification et/ou au
développement et à la reproduction du logiciel par l'utilisateur étant 
donné sa spécificité de logiciel libre, qui peut le rendre complexe à 
manipuler et qui le réserve donc à des développeurs et des professionnels
avertis possédant  des  connaissances  informatiques approfondies.  Les
utilisateurs sont donc invités à charger  et  tester  l'adéquation  du
logiciel à leurs besoins dans des conditions permettant d'assurer la
sécurité de leurs systèmes et ou de leurs données et, plus généralement, 
à l'utiliser et l'exploiter dans les mêmes conditions de sécurité. 

Le fait que vous puissiez accéder à cet en-tête signifie que vous avez 
pris connaissance de la licence CeCILL, et que vous en avez accepté les
termes.
*/

//@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;
        background-color: $color2 ;
}

strong {
	font-weight: bold ;
}

#main {
    background-color: white ;
    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 ; 

	.container {
		position: relative ;
	}
        
        #the-header {
            height: 80px ;
            height: auto ;
        }
        
        #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 ;*/
            float: left ;
            padding-top: 10px ;
            padding-bottom: 10px ;
            text-decoration: none ;
            font-size: 22px ;
            color: black ;
            display: block ;
            
            img {
                height: 50px ;
                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 ;
            padding-top: 0px ;
            margin-bottom: 0px ;
            border: 0px none ;
            background: none ;
            background-color: #f8f1dd ;
            @include box-shadow(none) ;

            .navbar-nav {
                padding-top: 17px ;
            }
            
            .navbar-toggle {
                background-color: white ;
            }
            
            ul {
                float: right ;
                li {
                    a {
                        text-decoration: none ;
                        color: $courant ;
                        @include box-shadow(none) ;
                        background-color: transparent ;
                        padding: 10px 20px ;
                        
                        &:hover {
                            color: black ;
                            background-color: white ;
                        }
                    }
                    
                    &.active {
                        a {
                            background: none ;
                            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-top: 35px ;
        padding-bottom: 50px ;
        
        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 ;
		}
	}
	
}

#favorite-producers {
    background-color: $color1 ;
    border-top: solid 1px #e0e0e0 ;
    padding: 0px ;
    padding-top: 20px ;
    margin: 0px ;
    
    h2 {
        font-family: 'myriadpro-regular' ;
        color: $color2;
        text-align: left ;
        font-size: 16px ;
        margin: 0px ;
        padding: 0px ;
        margin-left: 15px ;
        margin-bottom: 15px ;
    }
    
    .col-md-12, .col-md-6, .col-md-3 {
        float: left ;
    }
    
    .col-md-12 .producer {
        background-size: 920px auto ;    
    }
    .col-md-6 .producer {
        background-size: 460px auto ;    
    }
    
    .col-md-3 .producer {
        background-size: 230px auto ;    
    }

    .producer {
        position: relative ;
        height: 100px ;
        list-style-type: none ;
        text-align: center ;
        margin-bottom: 20px ;
        background-size: 300px auto ;    
        background-position: center center ;
        background-repeat: no-repeat ;
        border: solid 1px $color2 ;

        a {
            position: absolute ;
            bottom: 0px ;
            left: 0px ;
            width: 100% ;
            background-color: $color2 ;
            border-color: $color2 ;
            color: $color1 ;
            
            &:hover {
                background-color: #fafafa ;
                border-color: $color2 ;
                color: $color1 ;
            }
        }
    }
    
    #discover {
        padding-bottom: 20px ;
        text-align: center ;
        
        p {
            padding-bottom: 0px ;
            color: $color2 ;
        }
        
        .btn {
            background-color: $color2 ;
            color: $color1 ;
            border: solid 1px $color2 ;
        }
    }
}


#footer {
        width: 100% ;
        background-color: $color2 ;
	text-align: center ;
	border-top: 1px solid #e0e0e0 ;
	padding-top: 30px ;
	padding-bottom: 17px ; 
	
	a {
            font-family: 'myriadpro-regular' ;
            color: #7e7e7e;
            color: white ;
            color: $courant ;
            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" ;