Souke/producer/web/sass/order/_order.scss

.order-order #main {
    #app-order-order {
        display: none ;
        
        h3 {
            font-family: "highvoltageregular" ;
        }
        
        &.loaded {
            display: block ;
        }
        
        #distribution-date {
            display: none ;
        }
        
        .slide-enter-active {
            transition: all .2s ease;
        }
        
        .slide-leave-active {
            transition: all 0s ease;
        }
        .slide-enter, .slide-leave-to {
            transform: translateX(10px);
            opacity: 0;
        }
        
        #steps {
            margin-bottom: 20px ;
            ul {
                height: 70px ;
                
                li {
                    text-align: center ;
                    padding-right: 8px ;
                    padding-left: 8px ;
                    position: relative ;
                    
                    .info-step {
                        position: absolute ;
                        top: 45px ;
                        left: 0px ;
                        width: 100% ;
                        text-transform: normal ;
                        color: $color1 ;
                        font-family: 'capsuularegular' ;
                        font-size: 17px ;
                        font-weight: bold ;
                    }
                    
                    .glyphicon-chevron-right, 
                    &.active .glyphicon-chevron-right {
                        float: right ;
                        color: gray ;
                        position: relative ;
                        top: 10px ;
                    }
                    
                    &#step-date {
                        padding-left: 0px ;
                    }
                    
                    &#step-payment {
                        padding-right: 0px ;
                    }
                    
                    &#step-payment .btn::after,
                    &#step-date .btn::before {
                        display: none ;
                    }
                    
                    .btn {
                        color: #333 ;
                        text-transform: uppercase ;
                        display: block ;
                        width: 100% ;
                        position: relative ;
                        background-color: #e0e0e0 ;
                        @include border-radius(0px) ;
                        border: 0px none ;
                        text-transform: uppercase ;
                        
                        .button-content {
                            position: relative;
                            left: 8px ;
                        }
                        
                        &.btn-primary {
                            background-color: $color1 ;
                        }
                        
                        &::after, &::before {
                            content: '' ;
                            position: absolute ;
                            top: -1px ;
                        }
                        
                        &::after {
                            right: -34px ;
                            border:17px solid transparent;
                            border-left:17px solid #e0e0e0;
                            background-color: transparent ;
                        }
                        
                        &::before {
                            left: 0px ;
                            border:17px solid transparent;
                            border-left:17px solid white;
                            background-color: transparent ;
                        }
                        
                        &.btn-primary::after {
                            border-left:17px solid $color1;
                        }
                        
                        &:hover {
                            //background-color: lighten($color1, 5) ; 
                        }
                        
                        &:hover::after {
                            //border:17px solid transparent;
                            //border-left:17px solid #fefefe;
                        }
                    }
                    
                    .btn-primary {
                        color: white ;
                    }
                }
            }
        }
        
        #legend {
            #order-date-color, 
            #distribution-date-color {
                width: 13px ;
                height: 13px ;
                display: inline-block ;
            }
            
            #order-date-color {
                background-color: #FF7F00 ;
            }
            #distribution-date-color {
                background-color: #5cb85c ;
            }
        }
        
        #calendar {
            margin-bottom: 15px ;
            .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title[data-v-2083cb72] {
                font-size: 2rem ;
            } 
            .c-day-background {
                padding: 20px ;
            }
            
            .c-day:hover {
                .c-day-background {
                    background-color: #FF7F00 !important ; 
                    color: white !important ;
                }
            }
            
            .c-day-popover-content {
                font-size: 1.3rem ;
            }
        }

        #content-step-date {
            #distributions-list {
                .panel {
                    .btn-primary {
                        float: right ;
                    }

                    .date {
                        font-size: 20px ;
                    }

                    .point-sales {
                        color: gray ;
                        font-size: 14px ;
                        margin-top: 8px ;
                    }
                }
            }
        }
        
        .block-actions {
            text-align: right ;
            margin-top: 20px ;
        }
     
        table#points-sale {
            td.name {
                .the-name {
                    font-family: 'capsuularegular' ;
                    color: black ;
                    font-size: 20px ;
                    line-height: 25px ;
                }
            }
            
            td.actions {
                width: 150px ;
                button {
                    width: 100% ;
                }
            }
            
            tr.selected {
                td {
                    background-color: $color2 ;
                }            
            }
        }
        
        table#products {
            td.photo {
                img {
                    width: 100px ;
                }
            }
            
            td.name {
                .name {
                    font-family: 'capsuularegular' ;
                    color: black ;
                    font-size: 20px ;
                    line-height: 25px ;
                }
                .other {
                    font-size: 14px ;
                    color: #333 ;
                }
                .recipe {
                    color: gray ;
                }
            }
            .price-unit, .price-total {
                width: 100px ;
                text-align: center ;
                
                .unit {
                    color: gray ;
                    font-size: 13px ;
                }
            }
            .td-quantity {
                width: 175px ;
                input.quantity {
                    text-align: center ;
                    border-right: 0px none ;
                }
                .input-group-addon {
                    padding: 5px ;
                    padding-left: 0px ;
                    margin: 0px ;
                    border-left: 0px none ;
                    border-right: 0px none ;
                }
            }
            
            tr.total {
                .price-total {
                    font-size: 23px ;
                }
            }
        }
        
        #content-step-payment {
            .credit {
                .info {
                    margin-left: 20px ;
                    color: gray ;
                }
            }
            
            .comment {
                margin-bottom: 20px ;
            }
        }

        #specific-delays {
            strong {
                //text-decoration: underline ;
            }
        }

        #infos {
            margin-top: 30px ;
            .panel-body {
                padding-top: 0px ;
                white-space: pre-line ;
            }
        }
    }
}

#main #content {
    .panel {
        h3 {
            font-family: "highvoltageregular" ;
            margin: 0px ;
            padding-top: 10px ;
            padding-bottom: 4px ;
            font-size: 20px ;
        }
    }
}