Opendistrib/frontend/web/sass/_systeme_commandes.scss

h1.title-systeme-commande {
	color: black ;
	padding-bottom: 35px ;
	font-size: 30px ;
	line-height: 35px ;
	font-family: 'myriadpro-regular' ;	
        font-family: "comfortaalight" ;
        
	text-align: center ;
	position: relative ;
	margin-top: 30px ;
	
	img {
		width: 35px ;
		margin-right: 7px ;
	}
}

h2 {
    font-size: 20px ;
    //color: black ;
    text-transform: uppercase ;
}

#addetablissementform-id_etablissement,
#signupform-id_etablissement {
    option:disabled {
        font-weight: bold ;
        color: black ;
    }
    .lock {
        position: relative ;
    }
    
    .lock:before {
        font-family: "Glyphicons Halflings" ;
        content: "\e033";
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        position: relative;
        top: 1px;
        right: 0px ;
    }
}

#bloc-code-acces {
    display: none ;
}


#main .liste-etablissements {
            
    #bloc-liste-boulangeries {

    }

    .boulangerie {
        padding-left: 0px ;
        padding-right: 30px ;
        
        .panel {
            margin-bottom: 13px ;
        }
        
        &.selected .panel {
            border-bottom: solid 3px $color1 ;
            margin-bottom: 11px ;
        }
        
        .panel-heading {

            height: 150px ;
            overflow: hidden ;
            padding: 0px ;
            background: none ;
            background-color: #F8F1DD ;
            .img-back {
                //display: none ;
                width: 100% ;
                height: auto ;
                position: relative;
                top: -50% ;
            }
        }

        .panel-body {
            position: relative ;
            width: 100% ;
            height: 150px ;
            max-height: 150px;
            text-align: center ;

            h3 {
                margin-bottom: 4px ;
            }

            .localite {
                color: gray ;
                margin-bottom: 10px ;
            }

            .glyphicon-check {
                color: $color1 ;
                font-size: 40px ;
                position: absolute ;
                top: 34px ;
                left: 32px ;
            }
            
            .remove {
                position: absolute ;
                top: 10px; 
                right: 10px ;
            }

            .logo {
                display: none ;
                width: 150px ;
                position: absolute ;
                top: -40px ;
                left: 50% ;
                margin-left: -75px ;
                background-color: white ;
                padding: 10px 20px ;
            }
            
            .heure-limite-commande,
            .credit-pain {
                margin-top: 15px ;
                font-size: 13px ;
            }
            
            .heure-limite-commande {
                float: left ;
            }
            
            .credit-pain {
                float: right ;
                
                .montant {
                    font-size: 16px ;
                    color: $color1 ;
                    background-color: $color2 ;
                    padding: 2px 10px ;
                    @include border-radius(5px) ;
                    font-weight: bold ;
                    .glyphicon {
                        font-size: 13px ;
                    }
                }
            }
            
            .info-credit-pain {
                font-size: 17px ;
                position: relative ;
                top: 2px ;
                left: 3px ;
                color: $color1 ; 
            }
        }
    }  
}

#index-commande {
	position: relative ;
	
	#logout {
		position: absolute ;
		/*top: 45px ;
		right: 93px ;*/
		top: 0 ;
		right: 0 ;
		z-index: 10 ;
	}
	
	.accueil {
		text-align: center ;
		padding-bottom: 20px; 
	}
        
        #bloc-add-etablissement {
            padding-left: 0px ;
            padding-right: 30px ;
            
            .help-block {
                padding-bottom: 0px ;
            }
            
            .field-addetablissementform-id_etablissement {
                width: 70% ;
                float: left ;
            }
            
            .field-addetablissementform-code {
                width: 70% ;
                float: left ;
            }
            
            .btn {
                float: right ;
                position: relative ;
                top: 20px ;
            }
            
            .panel-heading {
                background: none ;
                background-color: white ;
                cursor: pointer ;
            }
            
            .panel-body {
                display: none ;
            }
        }

	#historique-commandes {
		.statut, .montant {
			width: 175px ;
		}
		.montant {
			//text-align: center ;
			width: 100px ;
		}
		
		.nom-point-vente {
		}
		.localite {
			font-size: 11px ;
			lin-height: 11px ;
		}
		
		a {
			text-decoration: none ;
		}
		
                .commentaire {
                    margin-top: 5px ;
                    span {
                        font-size: 12px ;
                        background-color: white ;
                        color: $color1 ;
                        font-weight: bold ; 
                        @include border-radius(5px) ;
                        padding: 5px 10px ;
                        border: solid 1px #ccc ;
                    }
                }
	}
}
		
.commande-form {
	
        min-height: 600px ;
        padding-bottom: 60px ;
        
	h2 {
		font-family: "myriadpro-regular" ;
	}
	
	#infos-importantes.alert-warning {
		float: right ;
	}
	
	#datepicker-production {
	
		.ui-datepicker {
			float: left ;
			margin-right: 20px ;
                        font-size: 20px ;
		}
                
                .ui-datepicker-header {
                    background-color: $color1 ;
                }
                
                .ui-datepicker-title {
                    color: white 
                }
                
                .ui-datepicker-prev,
                .ui-datepicker-next {
                    &:hover {
                        border: 0px none ;
                        background: none ;
                    }
                }
	
		.ui-helper-clearfix:after {
			clear: none ;
		}
                
                .ui-datepicker-calendar {
                    a {
                        text-decoration: none ;
                        background-color: $color2 ;
                        &.ui-state-hover, &.ui-state-active {
                            background-color: $color1 ;
                            color: white ;
                            border-color: #cdc3b7 ;
                        }
                    }
                }
	}
        
        .date-commande {
            margin-bottom: 53px ;
            span {
                background-color: $color1 ;
                color: white ;
                @include border-radius(10px) ;
                padding: 10px ;
                font-family: "myriadpro-regular"; 
                font-size: 20px ;
            }
        }
	
	#has-commande-en-cours {
		margin-top: 15px ;
		
		a {
			color: #a94442 ;
			text-decoration: none ;
			font-weight: bold ;
		}
	}
        
        .field-commande-id_production {
            display: none ;
        }
	
	.field-commande-id_point_vente {
		margin-top: 30px ;
	}
	
	.field-commande-id_production {
		margin-bottom: 0px ;
		label {
			margin-bottom: 0px ;
		}
		
		.help-block {
			margin-bottom: 0px ;
		}
	}
        
        .field-commande-id_point_vente {
            display: none ;
        }
	
	.blocs {
		list-style-type: none ;
		margin: 0px ;
		padding: 0px ;
		
		.bloc {
                        text-decoration: none ;
			width: 268px ;
			height: 130px ;
			float: left ;
			padding: 20px ;
			margin-right: 20px ;
			margin-bottom: 8px ;
			cursor: pointer ;
			float: left ;
			background-color: #f9f9f9 ;
			background-color: white ;
                        
			border: 1px solid #d8d8d8 ;
			
			.nom {
				//text-align: center ;
				font-family: "comfortaalight" ;
				font-size: 20px ;
			}
			
			.adresse {
				color: gray ;
				font-size: 13px ;
				line-height: 16px ;
			}
			
			.horaires {
				margin-top: 7px ;
				.jour {
					font-weight: bold ;
					display: none ;
				}
			}
			
                        
			&.selected {
				border-left: solid 5px $color1 ;
				//@include box-shadow(0px 0px 5px #d8d8d8) ;
				.contenu {
					position: relative ;
					left: -4px ;
				}
			}
			
			&:hover {
				@include box-shadow(0px 0px 5px #d8d8d8) ;
				//@include box-shadow(none) ;
			}
			
			&.disabled {
				display: none ;
				//color: gray ;
			}
                        
                        .commentaire {
                            margin-top: 5px ;
                            span {
                                background-color: $color1 ;
                                @include border-radius(5px) ;
                                color: white ;
                                font-weight: bold ;
                                padding: 3px 10px ;
                            }
                        }
		}
	}
	
	#produits {
		margin-top: 15px ;
		
		#label-produits {
			display: block ;
			margin-bottom: 5px ;
		}
		
		.table {
			margin-top: 7px ;
			
			.illu {
				float: left ;
				height: auto ;
				width: 70px ;
				margin-right: 15px ;
			}
			
			.photo {
                                padding: 0px ;
                                width: 120px ;
			}
                        
                        .th-photo, .td-photo {
                            width: 120px ;
                        }
			
			.nom  {
				font-family: "comfortaalight" ;
				font-weight: bold ;
				text-transform: uppercase ;
				font-size: 18px ;
			}
			
			.description {
				font-style: italic;
			}	
			
			.recette {
				font-size: 12px ;
			}
			
			.input-group {
				width: 133px ;
				.quantity {
					text-align: center ;	
				}
			}
			
			.colonne-quantite, .prix-unit, .total {
				width: 150px ;
				text-align: center ;
			}
			
			td#total-commande, td#total-commande-vrac, td.total {
				text-align: center ;
			}	
			
			.epuise {
				display: none ;
				text-transform: uppercase ;
				color: #B32815 ;
				font-weight: bold ;
				font-size: 16px ;
				text-align: center ;
			}
			
			.quantite-restante {
				font-size: 12px ;
				margin-top: 8px ;
				
				.nb {
					font-weight: bold ;
				}
			}
			
			td.produit, th.produit {
				width: 70% ;
			} 
			
			td.prix-unit, th.prix-unit {
				width: 10% ;
			}
			
			td.colonne-quantite, th.colonne-quantite {
				width: 10% ;
			}
			
			td.total, th.total {
				width: 10% ;
			}
		}
	}

	#bar-fixed {
                display: none ;
                position: fixed ;
                bottom: 0px ;
                //left: 0px ;
                z-index: 100 ;
                //width: 100% ;
                background-color: white ;
                padding: 15px ;
                margin-bottom: 0px ;
                @include box-shadow(0 0 5px gray) ;
                @include border-radius(10px 10px 0px 0px) ;
                border-top: solid 1px #e0e0e0 ;
                background-color: #F9F9F9 ;
                background-color: $color2 ;
                text-align: center ;
                
                &.not-fixed {
                    position: relative ;
                    @include box-shadow(none) ;
                    @include border-radius(0px) ;
                    border: solid 1px #e0e0e0 ;
                    padding-right: 20px ;
                }
                
                &.no-credit-pain {
                    #bloc-valider-commande {
                        margin-top: 0px ;
                        float: right ;
                    }
                }
                
                #total-commande-bottom {
                    background-color: white ;
                    @include border-radius(20px) ;
                    padding: 5px 25px ;
                    border: solid 1px #e0e0e0 ;
                }
                 
                .btn-commentaire {
			float: left ;
		}
                
                .valider-commande {
                    //float: left;
                }
                
                .btn-commentaire {
                    margin-right: 10px ;
                }
                
                #bloc-valider-commande {
                    text-align: right ;
                    margin-top: 20px ;
                    
                    button {
                        width: 340px ;
                        margin-right: 10px ;
                    }
                }
                
                #checkbox-credit-pain {
                    float: right ;
                    width: 340px ;
                    padding: 3px 11px ;
                    background-color: white ;
                    border: solid 1px #ccc ;
                    @include border-radius(5px) ;
                    margin-right: 10px  ;
                    @include text-shadow(0 1px 0 #fff) ;
                    @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.075)) ;
                    
                    &.paiement-impossible {
                        background-color: #e0e0e0 ;
                    }
                    
                    .info {
                        color: gray ;
                        font-weight: normal 
                    }
                    
                    .the-credit {
                        background-color: $color1 ;
                        color: white ;
                        padding: 2px 8px;
                        @include border-radius(5px) ;
                    }
                    
                    .montant-paye {
                        color: $color1 ;
                    }
                    
                    #info-credit-vide {
                        font-size: 12px ;
                    }
                    
                    #credit-pain-disabled {
                        display: none ;
                        font-size: 12px ;
                    }
                }
                
                .btn-retour, .annuler-commande {
                    float: left ;
                    margin-right: 5px ;
                }
                
                .annuler-commande {
                    color: #b92c28 ;
                    background-color: white ;
                }
                
                #total-commande-bottom {
                    display: none ;
                    font-weight: bold ;
                    font-family: "comfortaalight" ;
                    font-size: 24px ;
                }
                
                .field-commande-commentaire {
                    display: none ;
                }
	}
}

.ui-datepicker {
	//@include border-radius(0px) ;
	.ui-widget-header {
		background: none ;
		background-color: gray ;
		border: 0px none ;
		color: black ;
		font-weight: normal ;
	}
	
	.ui-datepicker-current-day a,
	a.ui-state-hover {
		background: none ;
		//background-color: #fdd44b ;
                background-color: gray ;
                border-color: black ;
		color: black ;
	}
	
	
}

#page-etablissement {
    h1 {
        font-size: 40px ;
    }
    .info {
        text-align: center ;
    }
}