Subversion Repositories Integrator Subversion

/***
NEW TODO Page
***/

@import '../global/_variables'; // global variables.
@import '../global/components/_mixins'; // global mixings.

.todo-main-header{
        margin-top: -20px;

        > h3{
                font-weight: 400;
                font-size:22px;
                margin-right: 1em;
                display: inline-block;
                color:#3b464f;
        }

        >.todo-breadcrumb{
                border-left:1px solid;
                border-color:#dae3eb;
                padding:0.5em 2em;
                display: inline-block;
                margin-top:17px;

                > li{
                        display: inline-block;
                        font-size:11px;

                        > a{
                                color:#77838d;
                                text-transform: uppercase;
                                text-decoration: none;

                                &:hover{
                                        color:#337ab7;
                                        text-decoration: none;
                                }
                        }

                        >.todo-active{
                                color:#49a7fa;
                        }


                        &:before{
                                content: "•";
                        color: #b6c1cb;
                        margin:0 1em;
                        }

                        &:first-child:before{
                                content: "";
                                margin:0;
                        }
                        
                }
        }
}

.todo-container{

        .todo-projects-container,
        .todo-tasks-container{
                background-color:#fff;
                border:1px solid;
                border-color: #ebf0f5;
        }

        .todo-projects-container{
                padding:0;

                >li {
                        list-style: none;
                        padding:30px 20px;
                }
        }

        .todo-projects-divider{
                height:1px;
                margin:0;
                background-color: #ebf0f5;
        }

        .todo-tasks-container{
                padding:30px 20px;
        }

        .todo-head{
                border-bottom:1px solid;
                border-color:#ebf0f5;
                padding-bottom:20px;

                > h3{
                        margin-top:0;
                        display: inline-block;
                        color:#4db3a4;
                        font-weight: 600;
                        text-transform: uppercase;
                        font-size: 15px;
                }

                > p{
                        display: inline-block;
                        color:#9eacb4;
                        font-size:12px;
                        margin-left:2em;
                        margin-bottom: 0;
                        margin-top: 0;
                }

                > button{
                        float:right;
                        font-weight: 600;
                        font-size: 11px;
                        text-transform: uppercase;
                }
        }

        .todo-projects-content,
        .todo-tasks-content {
                padding-left:0;
        }

        .todo-projects-item,
        .todo-tasks-item {
                list-style: none;
                margin-left: 0;
        }

        .todo-projects-item{

                > h3{
                        font-size: 20px;
                        color: #4e5a64;
                        font-weight: 600;
                        margin-top:0;
                        margin-bottom: 15px;
                }

                p{
                        color:#a0a9b4;
                        margin-bottom: 15px;
                        margin-top: 0;
                }

                &:last-child{
                        border-bottom: none;
                }

                &.todo-active{
                        background-color: #fafbfc;
                        position: relative;

                        >h3{
                                color:#49a7fa;
                        }

                        &:after{
                                content: " ";
                                width:0;
                                height:0;
                                border-top: 40px solid transparent;
                                border-bottom: 40px solid transparent;
                                border-left: 20px solid #fafbfc;
                                position: absolute;
                        right: -20px;
                        top: 65px;
                        }
                }

                &:hover{
                        background-color: #fafbfc;
                        cursor: pointer;
                }

                >.todo-project-item-foot{
                        font-size:12px;
                }
        }

        .todo-tasks-item{
                padding:30px 0;
                border-bottom:1px solid;
                border-color:#ebf0f5;

                >h4{
                        font-size: 16px;
                        font-weight: 600;
                        margin:0;
                        line-height: 1.3em;

                        > a{
                                color:#65717b;

                                &:hover{
                                        color:#49a7fa;
                                        text-decoration: none;
                                }

                                &:focus{
                                        color:#65717b;
                                        text-decoration: none;
                                }
                        }
                }

                >p {
                        margin: 0;
                        color:#9eacb4;
                }

                &:last-child{
                        border-bottom: none;
                }
        }

}

.todo-add-button{
        border:1px solid;
        border-color: #e0e6e9;
        background-color: #fff;
        color:#c1cbd1;
        text-decoration: none;
        padding: 0 0.4em;
        font-size: 20px;
        margin: -0.3em 0 0 0.5em;
        float: right;

        &:hover{
                background-color: #4db3a4;
                color:#fff;
                text-decoration: none;
        }

        &:focus{
                color:#c1cbd1;
                text-decoration: none;
        }
}

// TODO CUSTOM MODAL STYLING
#todo-members-modal{

        >.modal-dialog{
                top:20px;
        }

        .select-height{
                height:10em;
        }
}

#todo-task-modal{

        >.modal-dialog{
            position: absolute;
            top: 0;
            right: 0;
            //left:0;
            bottom: 0;
            width: 60%;
            margin:0 auto;

                .modal-content{
                        position: absolute;
                        top:0;
                        bottom:0;
                        right:0;
                        left:0;
                        overflow:auto;

                        .todo-task-modal-title {
                                font-weight: 600;
                                text-transform: uppercase;
                                margin-left: 2em;
                        }

                        .todo-task-due{
                                margin-left: 1em;
                                font-weight: 600;
                                color:#4db3a4;
                                width:150px !important;
                        }

                        .todo-task-assign{
                                margin-left: 1em;
                                border:1px solid;
                                border-color: #ccc;
                                padding:6px 10px;
                                font-weight: 600;
                                color:#4db3a4;
                                text-transform: uppercase;

                                &:hover,
                                &:focus{
                                        text-decoration: none;
                                }
                        }

                        > .todo-task-modal-body{

                                >.todo-task-modal-bg{
                                        background-color: #f7f9fa;
                                        padding: 20px;
                                }

                                >h3{
                                        margin: 15px 0;
                                        font-size: 20px;
                                        color:#4e5a64;
                                        font-weight: 600;
                                }

                                > p{
                                        font-size: 15px;
                                        color:#8f9ea6;
                                        line-height: 24px;
                                }

                                >h4{
                                        font-size: 14px;
                                        font-weight: 600;
                                        text-transform: uppercase;
                                        color:#9eacb4;
                                        margin-top:25px;

                                        > .todo-add-button{
                                                float:none;
                                        }
                                }

                                >.todo-task-file{
                                        color: #49a7fa;
                                        font-size:13px;

                                        > i{
                                                margin-right: 0.5em;
                                        }

                                        >.todo-remove-file{
                                                color:#9eacb4;
                                                margin-left: 0.5em;

                                                &:hover{
                                                        color:#4db3a4;
                                                        cursor: pointer;
                                                }
                                        }
                                }
                        }
                }
        }
}

// TODO CUSTOM FONT STYLING

.todo-inline{
        display: inline-block;
}

.todo-float-r{
        float:right;
}

.todo-bold{
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
}

.todo-padding-b-0{
        padding-bottom: 0 !important;
}

.todo-grey{
        color:#9eacb4;
}

.todo-red{
        color: #d39790 !important;
}

.todo-green{
        color:#4db3a4;
}



/* RESPONSIVE MODE */
@media (max-width: $screen-md-max) { 

        .todo-head{

                >p{
                        display:block;
                        margin-left: 0 !important;
                }
        }

}


@media (max-width: $screen-sm-max) { /* 991px */

        #todo-task-modal{

                >.modal-dialog{
                        width: 95%;     
                }
        }

        .todo-active{
                &:after{
                        border:none !important;
                }
        }

}

@media (max-width: $screen-xs-min){

        .todo-task-modal-title{
                margin-left:0 !important;
                margin-top:1em;
                display:block !important;
        }

        .todo-tasks-container{

                .todo-head{
                        >p {
                                margin-left: 0 !important;
                                margin-top: 1em;
                        }
                }
        }

        #todo-task-modal{

                .modal-content{
                        //overflow-y: scroll;
                }
        }
}