Souke/backend/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" ;

$dir-fonts: '../fonts/' ;
@import "_fonts.scss" ;

$color1: #BB8757 ;
$color2: #F8F1DD ;

.clr {
	clear: both ;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'myriadpro-light' ;
}

a {
    color: $color1; 
    
    &:hover, &:focus, &:active {
        color: darken($color1, 10) ;
    }
}

#block-demo {
    padding: 10px 0px ;
    background-color: $color2 ;
    color: $color1;
    text-align: left ;
    margin-bottom: 20px ;
    border: solid 1px lighten($color1,10) ;
    @include border-radius(5px) ;
    
    a {
        text-decoration: underline ;
    }
}

#env-dev {
    font-family: 'comfortaabold' ;
    text-align: center  ;
    font-size: 18px ;
    padding: 5px 10px ;
    color: white ;
    position: fixed ;
    top: 9px ;
    left: 66px ;
    z-index: 1031 ;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: $color1 ;
    border: solid 1px $color1 ;
}
.pagination > li > a, .pagination > li > span {
    color: $color1 ;
    &:hover {
        color: darken($color1, 10) ;
    }
}

.wrap {
    .btn-primary, 
    .btn-success {
        background-color: $color1 ;
        border: solid 1px $color1 ;

        &:hover, &:focus, &:active {
            background-color: darken($color1, 10) ;
            border: solid 1px darken($color1, 10) ;
        }
    }
}

.nav-header {
    .retour-site {
        border-left : solid 1px $color2 ;
        padding: 10px 15px ;
    }
}

.navbar-brand {
    .logo {
        height: 40px ;
        position: relative ;
        top: -10px ;
    }
}

.container-body {
    padding-top: 117px ;
    padding-bottom: 50px ;
}

.navbar-inverse {
    background-color: $color1 ;
    border-bottom: 0px none ;
    
    .navbar-nav {
        padding-top: 12px ;
    }
    
    .navbar-nav > li > a {
        color: white ;
        margin-left: 3px; 
        padding: 3px 11px ;
            
        &:hover {
            color: $color2 ;
            //background-color: $color2 ;
        }
    }
    
    .navbar-nav > li.active,
    .navbar-nav > .open {
        a {
            margin-left: 3px ;
            background-color: $color2 ;
            color: $color1 ;
            padding: 3px 11px ;
            @include border-radius(5px) ;
            
            &:hover,
            &:focus {
                background-color: $color2 ;
                color: $color1 ;    
            }
        }
    }
    
    .navbar-nav > .open {
        a.dropdown-toggle {
            @include border-radius(5px 5px 0px 0px) ;
        }
        
        ul.dropdown-menu {
            @include box-shadow(0px 0px 5px gray) ;
            @include border-radius(5px 0px 5px 5px) ;
            border-top: 0px none ;
            right: -1px ;
            li {
                a {
                    background-color: transparent ;
                    
                    &:hover { 
                        color: darken($color1,10) ;
                    }
                }
            }            
        }
    }
    
    
    .navbar-nav > .open > a, 
    .navbar-nav > .open > a:hover, 
    .navbar-nav > .open > a:focus {
        
    }
}

#alerts-fixed {
    position: fixed ;
    bottom: 20px ;
    left: 20px ;
    
    .alert {
        margin-top: 20px ;
    }
}

.nom-boulange {
    //font-family: 'Georgia' ;
    margin-bottom: 15px ;
    text-align: left ;
    position: fixed ;
    top: 51px ;
    left: 0px ;
    width: 100% ;
    background-color: #515151 ;
    background-color: $color2 ;
    color: darken($color1,15) ;
    z-index: 100 ;
    font-size: 20px ;
    padding: 8px 15px ;
    padding-bottom: 2px ;
    padding-top: 5px ;
    border-bottom: solid 1px #e0e0e0 ;
    @include box-shadow(0px 0px 5px gray) ;
    
    #etat-paiement-etablissement {
        float: right ;
        text-align: right ;
        color: darken($color1,15) ;
        font-size: 16px ;
        .strong {
            background-color: white ;
            color: $color1 ;
            @include border-radius(10px) ;
            padding: 0px 10px ;
        }
        .btn {
            padding: 2px 5px ;
        }
    }
    
    #select-etablissement {
        float: left ;
        font-size: 15px ;
    }

    .label {
        font-size: 11px ;
        margin-left: 10px ;
        position: relative ;
        bottom: 3px ;
        a {
            color: white ;
            &:hover {
                text-decoration: none ; 
            }
        }
    }
}


.table {
    thead {
        th.actions {
            width: 220px ;
        }
        th.order {
            width: 58px ;
        }
        th.actif {
            width: 75px ;
            text-align: center;
        }
    }
    tbody {
        td.center {
            text-align: center ;
        }
    }
}

.footer {
    .pull-left {
        a {
            margin-right: 5px ;
            margin-left: 5px ;
            //text-transform: uppercase ;
            color: gray ;
        }
    } 
}

// tableau de bord
.site-index {
    .panel {
        .panel-title {
            .btn {
                float: right ;
                font-family: 'myriadpro-regular' ;
                
                &.btn-success {
                    background-color: #5cb85c ;
                    color: white ;
                    border-color: #5cb85c ;
                }
                
                &.margin-left {
                    margin-left: 5px ;
                }
            }
        }
        .panel-body {
            //height: 250px ;
        }
    }
    
    #dernieres-commandes {
        .small, .localite {
            font-size: 12px ;
            color: gray ;
        }
        .commentaire {
            font-size: 12px ;
        }
        
        .date {
            text-align: center ;
            
            .bloc-date {
                width: 50% ;
                margin: 0px auto ;
                padding-top: 0px ; 
            }
            
            
            
            .jour {
                text-transform: capitalize ;
                line-height: 13px ;
                font-size: 10px ;
                text-transform: uppercase ;
            }
            
            .num {
                font-size: 23px ;
                line-height: 28px ;
                font-weight: bold ;
            }
            
            .mois {
                text-transform: uppercase ;
                line-height: 13px ;
                font-size: 15px ;
            }
        }
    }
    
    #facturation {
        h2 {
            font-size: 25px ;
            text-align: center ;
        }
        
        .mois-en-cours {
            .montant span {
                background-color: white ;
                color: #333 ;
                border: solid 1px gray ;
            }
        }
        
        .montant {
            margin-top: 35px ;
            text-align: center ;
            span {
                font-size: 22px ;
                color: white ;
                background-color: $color1 ;
                padding: 7px 10px 3px;
                font-family: 'myriadpro-regular' ;
                @include border-radius(5px) ;
            }
        }
    }
    
}

#page-commande {

        #row2 {
            
        }
    
	h1 {
		.btn-group {
			float: right ;
		}
	}
        
        #col-left, #col-right {
            padding-left: 0px ;
            padding-right: 0px ;
        }
        #col-right {
            padding-left: 20px ;
        }
	
	#jours-production {
		display: none ;
	}
	
	#calendar {
            
                h2 {
                    font-size: 20px ;
                    position: relative ;
                    top: 3px ;
                }
            
		.fc-header-title {
			margin-left: 10px ;
		}
		
		$back-day-with-event: lighten(#FDD44B,13) ; 
		//$back-day-with-event: #FDD44B ;
		.dayWithEvent { 
			background-color: $back-day-with-event ; 
			cursor: pointer;
		}
		.fc-event-container {display: none;}
		.fc-today {
			border-bottom: solid 1px #C9302C ;
			background-color: white ;
			
			&.dayWithEvent {
				background-color: $back-day-with-event ;	
			}
		}
		
		.fc-day {
			cursor: pointer ;
			text-align: center ;
			&:hover {
				@include box-shadow(0px 0px 2px black inset) ;
			}
		}
		
		.current-date {
			@include box-shadow(0px 0px 2px black inset) ;
		}
		
		.fc-day-number {
			float: none ;
			padding-top: 2px ;
		}
	}
        
        #bloc-production {
            
            .label {
                float: right ;
                font-size: 13px ;
            }
            
            .btn-success {
                background-color: #5cb85c ;
                border-color: #4cae4c ;
            }
            
            #productions-point-vente {
                margin-top: 15px ;
                padding: 10px ;
                border: solid 1px #e0e0e0 ;
                background-color: #F5F5F5 ;
                @include border-radius(5px) ;
                label {
                    display: block ;
                    font-weight: normal ;
                }
                
                .checkbox-list {
                    margin-left: 10px ;
                    margin-top: 10px ;
                }
            }
        }
	
	#produits-production {
            
            .overflow {
                //max-height: 400px ;
                //overflow-y: scroll ;
                
                table {
                    width: 100%;
                }

                thead, tbody, tr, td, th { display: block; }

                tr:after {
                    content: ' ';
                    display: block;
                    visibility: hidden;
                    clear: both;
                }

                thead th {
                    height: 30px;

                    /*text-align: left;*/
                }

                tbody {
                    height: 500px;
                    overflow-y: auto;
                }

                thead {
                }

                thead th {
                    width: 32%;
                    float: left;
                }
                
                tbody td{
                    width: 33%;
                    float: left;
                }
                
                .td-produit {
                    width: 60% ;
                }
                .td-actif, .td-max {
                    width: 20% ;
                    text-align: center ;
                }
                
                thead {
                    .td-produit {
                        width: 57% ;
                    }
                }
            }
            
            input.quantite-max {
                background-color: white;
                border: 1px solid #e0e0e0;
                text-align: center;
                width: 50px;
            }

            td {
                label {
                    font-weight: normal ;
                }
            }
	}
        
        #btn-export-commandes, 
        #btn-commandes-auto {
            float: right ;
            position: relative; 
            top: -5px ;
            right: -7px ;
            padding: 2px 5px ;
        }
        
        #btn-export-commandes,
        #btn-commandes-auto {
            color: white ;
            margin-left: 10px ;
            padding: 1px 5px ;
        }
        
        #btn-commandes-auto {
            top: -7px ;
            .btn {
                padding: 2px 5px; 
                span {
                    top: 2px ;
                }
            }
        }
        
        #bloc-totaux {
            .table-produits {
                .depasse {
                    color: #b32815 ;
                }

                .total strong span {
                    font-weight: normal ;
                    font-size: 13px ;
                }
            }
        }
        
        #commandes-points-vente {
            
            .tab-pane {
                padding-top: 20px ;
            }
            
            .recap-pv {
                
                &.no-commande {
                    .recettes {
                        display: none;
                    }
                }
                .recettes {
                    float: right ;
                    color: $color1 ;
                    //background-color: $color1 ;
                    border: solid 1px $color1 ;
                    
                    padding: 4px 10px ;
                    @include border-radius(10px) ;
                    font-weight: bold ;
                    position: relative ;
                    top: -3px ;
                }
            }
            
            .alert.commentaire {
                display: none ;
            }
            
            ul.liste-commandes {
                margin-top: 10px ;
                list-style-type: none ;
                height: 100% ;
                max-height: 400px ;
                //border: solid 1px #e0e0e0 ;
                margin-left: 0 ;
                padding-left: 0 ;
                margin-top: 0px ;
                width: 100% ;
                overflow-y: scroll ;

                &.no-commande {
                    display: none ;
                }
                
                li {
                    padding: 0 ;
                    margin: 0 ;
                    a {
                        text-align: left;
                        @include border-radius(0px) ;
                        display: block ;
                        padding: 7px ;
                        //border-bottom: solid 1px #e0e0e0 ;
                        color: #333 ;
                        
                        .montant {
                            float: right ;
                            color: $color1 ;
                            font-weight: bold ;
                            
                            &.paye {
                                color: #5cb85c ;
                                color: #519951 ;
                            }
                        }
                        
                        .glyphicon-comment {
                            color: $color1 ;
                        }
                        
                        &:hover, &:active, &.active {
                            text-decoration: none ;
                            //background-color: #F5F5F5 ;
                            //background-color: lighten($color2,5) ;
                            background-color: #FCF8E3 ;
                            //border-right: solid 3px $color1 ;
                            outline: none ;
                            border-color: #ccc ;
                            @include transition(all 0.1s) ;
                        }
                    }
                }
            }
            
            .creer-commande,
            .commandes-auto {
                width: 100% ;
                margin-bottom: 10px ;
            }
            
            .bloc-commande {
                padding-top: 20px ;
                margin-top: 20px ;
                display: none ;
            }
            
            .title-user {
                display: none ;
                font-size: 19px ;
                margin-top: 0px ;
                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif ;
                
                .btn-edit, .btn-remove,
                .btn-cancel, .btn-save {
                    float: right ;
                    position: relative ;
                    top: -6px ;
                }
                
                .btn-edit, .btn-cancel {
                    margin-right: 10px ;
                }
                
                .buttons-save-cancel {
                    display: none ;
                }
                
                .choix-user {
                    display: none ;
                    
                    .form-control {
                        width: 200px ;
                        display: inline ;
                    }
                }
            }
            
            table.table-produits {
                .td-commande {
                    text-align: center ;
                }
                input.form-control {
                    //width: 100px ;
                    text-align: center ;
                }
            }
         
            .td-produit,
            .th-produit {
                width: 70% ;
            }
            
            .td-commande,
            .th-commande {
                width: 30% ;
                text-align: center ;
            }
            
            .td-produit {
                text-transform: uppercase ;
            }
            
            .td-commande {
                font-weight: bold ;
            }
            
            .td-total {
                font-size: 18px ;
                text-align: center ;
                
                span {
                    padding: 2px 10px ;
                    background-color: $color1 ;
                    color: white ;
                    font-weight: bold ;
                    @include border-radius(8px) ;
                }
            }
            
            .td-paiement {
                .buttons-credit {
                    float: right ;
                }
            }
            
            .panel-commande-automatique {
                .field-commandeautoform-id_user,
                .field-commandeautoform-id_etablissement
                {
                    display: none ;
                }
                
                .jours {
                    .form-group {
                        float: left ;
                        margin-right: 10px ;
                    }
                }
            }
            
        }
        
        #old-commandes {
            display: none ;
        }
	
	.form-commandes-point-vente {
	
		margin-top: 20px ;
                
                table {
                    border-bottom: solid 1px #e0e0e0 ;
                }
                
		.title-point-vente {
			background-color: lighten(#fdd44b, 30) ;
			border-left: solid 3px $color1 ;
			font-weight: bold ; 
                        text-align: left ;
                        padding: 10px ;
		}
                
                .title-totaux {
                    text-align: center ;
                }
                
                .border-left {
                    border-left: solid 1px #e0e0e0 ;
                }
                
                .border-right {
                    border-right: solid 1px #e0e0e0 ;
                }
	
		input.quantite {
			//width: 50px ;
                        width: 30px ;
			background-color: white ;
			border: solid 1px #e0e0e0 ;
			text-align: center ;
		}
		
		.td-produit {
			text-align: center ;
		}	
	
		.submit-pv {
			float: right ;
		}
		
		.select-user {
			background-color: #F9F9F9 ;
			border: solid 1px #e0e0e0 ;
		}
		
		.date-commande {
			font-size: 12px ;
		}
		
		.datepicker, .text {
			background-color: white ;
			border: solid 1px #e0e0e0 ;
			margin-top: 3px ;
			width: 100px ;
		}
		
		
		td.center {
			text-align: center ;
		}
                
                
	
		.depasse {
			color: #b32815 ;
		}
	
		.total strong span {
			font-weight: normal ;
			font-size: 13px ;
		}
		
		.vrac {
			display: none ;
		}
                
                td.client {
                    text-align: left ;
                    padding: 3px ;
                    .date-commande {
                        color: gray ;
                    }
                }
	
	}
        
        .table-header-rotated {
            border-top: 0px ;
            border-left: 0px ;
            border-right: 0px ;
            width: 100% ;
            width: auto ;
            
            .total strong {
                border-bottom: solid 1px gray ;
            }
        }
        
        .table-header-rotated th.row-header{
            width: auto;
          }

          .table-header-rotated td{
            width: 40px;
            border-top: 1px solid #dddddd;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
            vertical-align: middle;
            text-align: center;
          }

          .table-header-rotated th.rotate-45{
           font-weight: normal ;
            height: 80px;
            width: 40px;
            min-width: 40px;
            max-width: 40px;
            position: relative;
            vertical-align: bottom;
            padding: 0;
            font-size: 14px;
            line-height: 1;
            border: 0px none;
          }

          .table-header-rotated th.rotate-45 > div{
              background-color: #F5F5F5 ;
            position: relative;
            top: 0px;
            left: 40px; /* 80 * tan(45) / 2 = 40 where 80 is the height on the cell and 45 is the transform angle*/
            height: 100%;
            -ms-transform:skew(-45deg,0deg);
            -moz-transform:skew(-45deg,0deg);
            -webkit-transform:skew(-45deg,0deg);
            -o-transform:skew(-45deg,0deg);
            transform:skew(-45deg,0deg);
            overflow: hidden;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
            border-top: 1px solid #dddddd;
          }

          .table-header-rotated th.rotate-45 span {
            -ms-transform:skew(45deg,0deg) rotate(315deg);
            -moz-transform:skew(45deg,0deg) rotate(315deg);
            -webkit-transform:skew(45deg,0deg) rotate(315deg);
            -o-transform:skew(45deg,0deg) rotate(315deg);
            transform:skew(45deg,0deg) rotate(315deg);
            position: absolute;
            bottom: 30px; /* 40 cos(45) = 28 with an additional 2px margin*/
            left: -25px; /*Because it looked good, but there is probably a mathematical link here as well*/
            display: inline-block;
            // width: 100%;
            width: 85px; /* 80 / cos(45) - 40 cos (45) = 85 where 80 is the height of the cell, 40 the width of the cell and 45 the transform angle*/
            text-align: left;
            // white-space: nowrap; /*whether to display in one line or not*/
          }
	
	
}


#email-masse-form {
    #ids-users {
        line-height: 30px ;
        .label {
            text-transform: capitalize ;
        }
    }
}

.produit-create, .produit-update {
    #jours-production {
        .form-group {
            float: left ;
            margin-right: 15px ;
            
            label {
                font-weight: normal ;
            }
        }
    }
    .field-produit-id_etablissement {
        display: none; 
    }
}

.table-striped > tbody > tr:nth-of-type(2n) {
    background-color: white ;
}

.wrap .produit-index {
    .td-photo {
        max-width: 100px ;
        width: 100px ;
    }
    .photo-produit {
        max-width: 100px ;
    }
    
    .ui-state-highlight { 
        height: 75px; 
        background-color: $color2 ;
    }   
}

/* communiquer */

.communiquer-mode-emploi {
    border: solid 1px #e0e0e0 ;
    padding: 10px ;
    @include border-radius(10px) ;
    margin-bottom: 30px ;
    font-family: 'myriadpro-regular' ;
    
    .header {
        .logo {
            float: left ;
            width: 75px ;
            padding-right: 20px ;
            padding-top: 10px ;
            
            img {
                width: 75px ;
                
            }
         }
        
        h1 {
            font-family: 'comfortaaregular' ;
            font-size: 40px ;
            margin-top: 0px ;
            margin-bottom: 0px ;
            font-weight: normal ;
        }
        
        h2 {
            margin-top: 0px ;
            font-family: 'myriadpro-regular' ;
            font-size: 20px ;
            margin-top: 0px ;
            position: relative ;
            left: 2px ;
            font-weight: normal ;
        }
    }
    
    h3 {
        font-family: 'comfortaalight' ;
        font-family: 'myriadpro-regular' ;
        font-size: 25px ;
        color: $color1 ;
        margin-top: 0px ;
        margin-bottom: 0px ;
    }
}

.communiquer-mode-emploi-encart {
    width: 420px ;
    margin-top: 20px ;
    .header {
        .logo {
            width: 60px ;
            margin-right: 20px ;
            padding-top: 5px ;
            
            img {
                width: 60px ;
                
            }
         }
        
        h1 {
            margin-bottom: 3px ;
        }
        
        h2 {
            
        }
    }
    
    h3 {
        margin-top: 15px ;
        margin-bottom: 15px ;
    }
}

.bloc-mode-emploi-pdf {
    width: 49.9% ;
    float: left;
    border-bottom: dotted 1px gray ;
}

.bloc-mode-emploi-border {
    border-right: dotted 1px gray ;
    border-bottom: dotted 1px gray ;
}

.communiquer-mode-emploi-pdf {
    border: 0px none ;
    //border-bottom: dotted 1px gray ;
    @include border-radius(0px) ;
    margin-bottom: 0px;
    padding: 20px 0px 20px 30px ;
    
    .header {
        .logo {
            float: left ;
            width: 55px ;
            padding-right: 15px ;
            padding-top: 10px ;

            img {
                width: 55px ;
            }
        }
        h1 {
            font-size: 32px ;
        }
        h2 {
           font-size: 16px ; 
        }
    }
    
    h3 {
        font-weight: normal ;
    }
}

.bloc-mode-emploi-bottom {
    border-bottom: 0px none ;
    border-bottom: solid 1px white;
}


/* commandes auto */

.commandeauto-form {
    
    #bloc-select-user {
        padding-left: 0px ;
    }
    
    #or-user {
        font-size: 20px ;
        text-align: center ;
        span {
            position: relative ;
            top: 24px ;
        }
    }
    
    .field-commandeautoform-id_etablissement {
        display: none ;
    }
    .jours {
        .form-group {
            float: left; 
            margin-right: 20px ; 
        }
    }
    
    .produits {
        .table {
            width: 500px ;
        }
        .quantite {
            text-align: center ;
        }
    }
}

/* points de vente */

.point-vente-form {
    #pointvente-users {
        display: none ;
        height: 500px ;
        overflow-y: scroll ;
        label {
            font-weight: normal ;
            display: block ;
        }
        .commentaire {
            display: none ;
            margin-left: 17px ;
            width: 200px ;
        }
    }
    
    #jours-livraison {
        .form-group {
            float: left ;
            margin-right: 15px ;
            
            label {
                font-weight: normal ;
            }
        }
    }
}

/* utilisateurs */

.user-index {
    .input-group  {
        width: 180px ; 
        
        .input-credit {
            text-align: center ;
        }
    }
}

.user-credit {
    .the-credit {
        float: right ;
        font-weight: bold ;
        background-color: $color1 ;
        color: white ;
        @include border-radius(8px) ;
        padding: 3px 10px ;
        padding-top: 7px ; 
        position: relative ;
        top: -12px ;
    }
}

/* facturation */

#estimation-facture {
    padding: 20px ;
    background-color: #F9F9F9 ;

    h2 {
        font-family: 'myriadpro-it' ;
    }
    .montant {
        span {
            font-size: 25px ;
            color: white ;
            background-color: $color1 ;
            @include border-radius(5px) ;
            padding: 3px 10px ;
            padding-top: 7px ;
            font-family: 'myriadpro-regular' ;
        }
    }
    
    label {
        text-transform: uppercase ;
        font-family: "myriadpro-light" ;
        font-size: 20px ;
        
        span {
            font-size: 16px ;
        }
    }
    
    #etablissement-prix_libre {
        width: 100px ;
        height: 60px ;
        font-size: 30px ;
        padding: 10px ;
        text-align: center ;
    }
}

.developpement-index {
    ul#tabs-statuts-developpements {
        margin-bottom: 30px ;
        border-bottom: solid 3px $color1 ;
        
        a {
            text-transform: uppercase ;
        }
        .active {
            border: 0px none ;
            background: none ;
            a {
                background-color: $color1 ;
                color: white ;        
            }
        }
    }
    
    #tab-developpements {
        .btn-group-priorite {
            width: 100% ;
            margin-bottom: 5px ;

            .btn-priorite {
                display: block ;
                float: none ;
                width: 100% ;
            }
        }
        
        .label-priorite {
            display: block ;
            width: 100% ;
            margin-bottom: 2px ;
            padding: 5px 8px ;
        }
    }
}