Opendistrib/frontend/web/sass/screen.scss

/** 
Copyright distrib (2018) 

contact@opendistrib.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 : #323232 ;
$color2: lighten($jaune,30%) ;
$color2: #fff2c7 ;
$color2: #fff6d5 ;
$color1: #BB8757 ;
$color2: #F8F1DD ;

$color1: #FF7F00 ;
$color2: white ;

@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: #f7f7f7 ;
    //background-color: #FFF8DC ;
}

strong {
	font-weight: bold ;
}

#main {
    padding-bottom: 50px ;
    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 {
    
    #the-content {
        padding-top: 100px ;
        padding-left: 30px ;
        padding-right: 30px ;
        padding-bottom: 50px ;
    }
    
    .content-text {
        h1 {
            font-family: 'highvoltageregular' ;
            font-size: 30px ;
            color: black ; 
            text-transform: uppercase ;
        }

        h2 {
            font-family: 'highvoltageregular' ;
            font-size: 20px ;
            text-transform: none ;
            padding-bottom: 0px ;
            margin-bottom: 5px ;
            margin-top: 5px ;
        }
    }
}

#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: white ;
        
	.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 {
            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 ;
                }
            }
        }
        
        #presentation-distrib {
            display: none ;
            float: left ;
            width: 300px ;
            margin-top: 20px ;
            margin-left: 20px ;
            text-align: left ;
            font-family: 'capsuularegular' ;
            font-size: 18px ;
            line-height: 20px ;
        }
        
        #link-space-producer {
            border-left: solid 1px #e0e0e0 ;
            color: $color1 ;
        }
        
        nav {
            padding-top: 0px ;
            margin-bottom: 0px ;
            border: 0px none ;
            background: none ;
            @include box-shadow(none) ;
            
            .navbar-toggle {
                background-color: white ;
            }
            
            ul {
                float: right ;
                padding: 0px ;
                margin: 0px ;
                margin-top: 18px ;
                
                li {
                    padding: 0px ;
                    display: block ;
                    a {
                        display: block ;
                        text-decoration: none ;
                        background-color: transparent ;
                        padding: 10px 15px ;
                        margin: 0px ;
                        font-family: 'capsuularegular' ;
                        color: black ;
                        font-size: 18px ;
                        @include border-radius(5px) ;
                        @include box-shadow(none) ;
                        
                        span {
                            font-size: 15px ;
                        }
                        
                        &:hover {
                            color: $color1 ;
                            background-color: white ;
                        }
                    }
                    
                    &#li-home a {
                        
                    }
                    
                    &.active {
                        a {
                            background-color: $color1;
                            color: white ;
                        }
                    }
                    
                    
                    ul {
                        li {
                            a {
                                padding: 10px 10px ;
                            }
                        }
                    }
                    
                }
            }
            
            
        }
        
        #link-logout {
            .name {
                 color: gray;
                font-size: 10px;
                left: 18px;
                position: relative;
                top: -4px;
            }
        }
        
}

#content {
        position: relative ;
	padding: 20px 0px ;
	padding-top: 35px ;
        padding-bottom: 50px ;
        
        h1#title-site, h1 {
            font-family: "highvoltageregular" ;
            font-size: 35px ;
        }
        
        h2 {
            color: $courant ;
            padding-bottom: 15px ;
            font-size: 25px ;
            line-height: 35px ;
            font-family: 'highvoltageregular' ;	
            text-transform: uppercase ;
            position: relative ;
            margin-top: 30px ;
        }

        h3 {
            font-family: 'highvoltageregular' ;	
            font-size: 20px ;
            color: $courant ;
        }
        
        .panel {
            .panel-heading {
                h2.panel-title {
                    margin: 0px ;
                    padding: 0px ;
                }
            }
        }
        
	#description {
		img {
			width: 100% ;
		}
	}
        
        #main-img {
            max-width: 100% ;
            border: solid 1px #e0e0e0 ;
            padding: 5px ;
            @include border-radius(5px) ;
        }
        
        #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 ; 
            }
        }
        
        #presentation-distrib {
            h2 {
                font-family: 'capsuularegular' ;
                text-align: left ;
                margin-top: 0px ;
                text-transform: none ;
                color: $color1 ;
                font-weight: bold ;
                
                span {
                }
            }
        }
        
        #row-users-producers, 
        #row-functionalities, 
        #row-rates {
            
            div.producer, div.users {
            }
            
            div.producer {
                .btn-primary {
                    margin-bottom: 5px ;
                }
            }
            
            h2 {
                text-align: left ;
                margin-top: 0px ;
                padding-bottom: 0px ;
                margin-bottom: 0px ;
                
               .img {
                    height: 20px ;
               }
               .glyphicon {
                    font-size: 20px ;
               }
               span.the-title {
                    margin-left: 10px ;
                    font-size: 20px ;
                    position: relative ;
                    top: 0px ;
                    text-transform: uppercase ;
               }
            }
            
            p.presentation {
                font-family: 'capsuularegular' ;
                color: black ;
                font-size: 20px ;
                line-height: 26px ;
            }
            
            p {
                padding-bottom: 4px ;
            }
        }
        
        #row-functionalities {
            .block {
                margin-bottom: 10px ;
                p {
                    font-family: 'capsuularegular' ;
                    font-size: 18px ;
                    margin-left: 70px ;
                }
                img {
                    float: left ;
                    width: 50px ;
                    height: auto ;
                }
                a {
                    text-decoration: none ;
                    color: black ;
                    &:hover {
                        color: $color1 ;
                    }
                }
            }
            
            .block-points-sale-products {
                img {
                    width: 40px ;
                }
            }
        }
        
        #row-rates {
            table {
                th {
                    font-family: 'capsuularegular' ;
                    font-weight: normal ;
                    font-size: 23px ;
                }
                th, td {
                    text-align: center ;
                }
            }
        }
        
        #btn-demo {
            &:hover, &:focus, &:active {
                color: black ;
            }
        }
        
        #modal-prices {
        }
}


#content #contact {
	
        display: none ;
    
	.icon {
		width: 55px ;
		top: -15px ;
		margin-left: -70px ;
	}
	
	.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 ;
		}
	}
}

#bookmarked-producers {
    padding: 0px ;
    padding-top: 20px ;
    margin: 0px ;
    border-bottom: solid 1px #e0e0e0 ;
    
    h2 {
        font-family: 'highvoltageregular' ;
        color: $courant ;
        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 #e0e0e0 ;
        background-color: white ;

        &.logo-distrib-default {
            background-size: auto 70px;    
            background-position: center 0px ;
        }
        
        a {
            position: absolute ;
            bottom: 0px ;
            left: 0px ;
            width: 100% ;
            background-color: $color1 ;
            border-color: $color1 ;
            color: white ;
            @include border-radius(0px) ;
            
            &:hover {
                background-color: darken($color1, 2);
            }
        }
    }
    
    #discover {
        padding-bottom: 20px ;
        text-align: center ;
        
        p {
            padding-bottom: 0px ;
            color: $color2 ;
        }
        
        .btn {
            background-color: $color2 ;
            color: $color1 ;
            border: solid 1px $color2 ;
        }
    }
}


#footer {
        position: absolute ;
        bottom: 0px ;
        width: 100% ;
	text-align: left ;
	padding-top: 30px ;
	padding-bottom: 17px ; 
        background-color: white ;
        border-top: solid 1px #e0e0e0 ;
	
	a {
            color: black ;
            font-family: 'capsuularegular' ;
            font-size: 18px ;
            text-decoration: none ;
            padding-left: 10px ;
            padding-right: 10px ;
            border-right: solid 1px white ;
            
            &:hover {
                text-decoration: underline ;
            }

            &:last-child {
                border: 0px none ;
            }
	}
        
        #code-source {
            img {
                height: 20px ;
            }
        }
}

#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: 'highvoltageregular' ;	
	}
	
	h3 {
		font-family: "highvoltageregular" ;
		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-days-distribution {
        .form-group {
            float: left ;
            margin-right: 15px ;
            label {
                font-weight: normal ;
            }
        }
    }
    
    p.strong {
        font-weight: bold ;
    }

}

/* login */

$max-width-form: 500px ;

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

/* signup */

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

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

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

#form-signup {
    #user-producer {
        margin-bottom: 30px ;
    }
    
    #signupform-id_producer {
        option:disabled {
            font-weight: bold ;
            color: black ;
        }
    }
    
    #champs-producer {
        display: none ;
    }
    
    #buttons-signup {
        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 ;
                }
            }
        }
    }
    
    #producers nav.nav-producers {
        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.name, span.wording {
                    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-producer {
    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-producer {
    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 ;
                }
            }
        }
    }
}

.site-contact {
    .col-lg-5 {
        margin: 0px auto ;
        float: none ;
    }
    
    #contact-phone {
        font-family: 'capsuularegular' ;
        font-size: 20px ; 
        line-height: 25px ;
    } 
}

@import "_order_system.scss" ;
@import "_responsive.scss" ;