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

.order-order {
    #app-order-order {
        
        display: none ;
        
        &.loaded {
            display: block ;
        }
        
        #order-distribution-date {
            display: none ;
        }
        
        .slide-enter-active {
            transition: all .2s ease;
        }
        
        .slide-leave-active {
            //transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
            transition: all 0s ease;
        }
        .slide-enter, .slide-leave-to {
            transform: translateX(10px);
            opacity: 0;
        }
        
        #steps {
            margin-bottom: 20px ;
            ul {
                margin-top: 30px ;
                li {
                    text-align: center ;
                    padding-right: 8px ;
                    padding-left: 8px ;
                    position: relative ;
                    
                    .info-step {
                        position: absolute ;
                        top: -30px ;
                        left: 0px ;
                        width: 100% ;
                        text-transform: normal ;
                    }
                    
                    .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: #018548 ;
            }
            #distribution-date-color {
                background-color: #00A65A ;
            }
        }
        
        #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: #F39C12 !important ; 
                }
            }
            
            .c-day-popover-content {
                font-size: 1.3rem ;
            }
        }
        
        .block-actions {
            text-align: right ;
            margin-top: 20px ;
        }
     
        table#points-sale {
            td.name {
                .the-name {
                    text-transform: uppercase ;
                    font-family: 'myriadpro-regular' ;
                    color: black ;
                    font-size: 16px ;
                }
            }
            
            td.actions {
                width: 150px ;
                button {
                    width: 100% ;
                }
            }
            
            tr.selected {
                td {
                    background-color: $color2 ;
                }            
            }
        }
        
        table#products {
            td.name {
                .name {
                    text-transform: uppercase ;
                    font-family: 'myriadpro-regular' ;
                    color: black ;
                    font-size: 16px ;
                }
                .other {
                    font-size: 14px ;
                    color: #333 ;
                }
                .recipe {
                    color: gray ;
                }
            }
            .price-unit, .price-total {
                width: 100px ;
                text-align: center ;
            }
            .td-quantity {
                width: 150px ;
                input.quantity {
                    text-align: center ;
                }
            }
            
            tr.total {
                .price-total {
                    font-size: 23px ;
                }
            }
        }
        
        #content-step-payment {
            .credit {
                margin-top: 20px ;
                
                .info {
                    margin-left: 20px ;
                    color: gray ;
                }
            }
        }
        
        #infos {
            margin-top: 30px ;
            .panel-body {
                padding-top: 0px ;
                white-space: pre-line ;
            }
        }
        
        #order-success {
            .alert.alert-success {
                .glyphicon-big {
                    background-color: #00A65A ;
                }
            }
            
            .alert.alert-info {
                .glyphicon-big {
                    background-color: #0097BC ;
                    padding: 55px 30px ;
                }
            }
            
            .alert {
                padding: 0px ;
                .glyphicon-big {
                    font-size: 90px ;
                    color: white ;
                    padding: 30px ;
                    float: left ;
                }

                div.content {
                    color: #333 ;
                    padding: 20px ;
                    margin-left: 151px ;
                    
                    h3 {
                        font-family: 'myriadpro-light' ;
                        text-transform: uppercase ;
                        font-size: 30px ;
                        color: #333 ;
                        margin-bottom: 20px ;
                        margin-top: 0px ;
                        margin-left: 0px ;
                        text-align: left ;
                        padding-left: 0px ;
                        line-height: 35px ;
                    }
                    
                    .locality {
                        color: gray ;
                    }
                }
            }
        }
    }
    
    
}