Subversion Repositories Integrator Subversion

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

/* 
Search Page
***/

// BEGIN : GENERAL SEARCH CLASSES
.search-page{

        // BEGIN : BORDER CONTAINERS
        .bordered{
                border:1px solid;
                border-color: $general-panel-border-color;
        }
        // END : BORDERED CONTAINERS

        // BEGIN: SEARCH BAR
        .search-bar{
                padding:20px;
                margin-bottom: 40px;
                background-color: #fff;

                input{
                        border:none;
                        background-color: #f3f6f9;
                        color:#a0a9b4;
                        height:55px;
                }

                button{
                        color:#fff;
                        height:55px;
                        width: 130px;
                        margin-left: -3px;
                        margin-top: -2px;
                }

                .search-desc{
                        margin:0;
                        color:#a0a9b4;
                        font-size: 13px;
                }
        }
        // END : SEARCH BAR

        // BEGIN: SEARCH FILTER 
        .search-filter{
                background-color:#fff;
                padding:40px 30px 0 30px;
                margin-bottom: 30px;

                >.search-label{
                        color:#a0a9b4;
                        font-size: 11px;
                        letter-spacing: 1px;
                        font-weight: 700;
                        margin-bottom: 10px;
                        margin-top: 40px;

                        &:first-child{
                                margin-top: 0;
                        }
                }

                input,
                select{
                        color:#727f89;
                        font-weight: 700;
                        font-size: 14px;
                }

                button{
                        margin: 40px 0;
                        padding:15px 0;
                }

                .search-filter-divider{
                        display:block;
                        height:1px; 
                }
        }

        // END : SEARCH FILTER


        // BEGIN : SEARCH PAGINATION 
        .search-pagination{
                text-align:center;

                > .pagination{

                        > li{

                                >a{
                                        margin:0 3px;
                                        border:none;
                                        background:#ddd;
                                        color:#666;

                                        &:hover{
                                                text-decoration: none;
                                                color:#fff;
                                                background-color: #3598DC;
                                        }
                                }
                        }

                        > .page-active{
                                
                                >a{
                                        background-color: #3598DC;
                                        color:#fff;
                                }
                        }
                }

                &.pagination-rounded{

                        > .pagination{
                                
                                >li{

                                        >a{
                                                border-radius: 50% !important; 
                                        }
                                }
                        }
                }
        }

        // END : SEARCH PAGINATION
}
// END : GENERAL SEARCH CLASSES

// SEARCH PAGE 1
.search-content-1{

        .search-container{
                background-color: #fff;

                > ul{
                        padding:0 20px 20px 20px;
                        margin-bottom: 0;

                        .search-item{
                                list-style: none;
                                padding:20px 0;
                                border-bottom: 1px solid;
                                border-color: #f4f6f8;

                                > a {
                                        >img{
                                                width:100px;
                                                float:left;
                                                margin-right: 20px;
                                        }
                                }

                                >.search-content{
                                        padding-left:120px;

                                        >.search-title{
                                                font-size: 20px;
                                                margin:10px 0 20px 0;
                                                font-weight: 600;

                                                > a{
                                                        color:#4e5a64;

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

                                        >.search-desc{
                                                color:#a0a9b4;
                                                font-size: 13px;
                                                margin:0;
                                        }
                                }

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


// SEARCH PAGE 2 & 3
.search-content-2{

        .search-container{
                background-color: #fff;

                >ul{
                        padding:20px;
                        margin-bottom: 0;

                        >.search-item-header{
                                list-style: none;
                                padding:0 0 5px 0;
                                border-bottom: 1px solid;
                                border-color: #f4f6f8;

                                h3{
                                        font-size:17px;
                                        color:#a0a9b4;
                                        margin:5px 0 0 0;               
                                }
                        }

                        .search-item{
                                list-style: none;
                                padding:20px 0;
                                border-bottom: 1px solid;
                                border-color: #f4f6f8;

                                >.search-content{

                                        p{
                                                margin:0;
                                        }

                                        .search-title{
                                                font-size: 19px;
                                                margin:0 0 20px 0;
                                                font-weight: 600;

                                                > a{
                                                        color:#4e5a64;

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

                                        .search-desc{
                                                color:#a0a9b4;
                                                font-size: 13px;

                                                > a{
                                                        color:#49a7fa;

                                                        &:hover{
                                                                text-decoration: none;
                                                                color:#326b9e;
                                                        }
                                                }
                                        }

                                        .search-counter-number,
                                        .search-counter-label{
                                                text-align: center;
                                        }

                                        .search-counter-number{
                                                font-size: 21px;
                                                color:#4e5a64;
                                                margin-bottom: 15px;
                                        }

                                        .search-counter-label{
                                                font-size: 13px;
                                                color:#8b96a4;
                                        }

                                }

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

}

// SEARCH PAGE 4
.search-content-3{
        
        .tile-container{
                margin-bottom:30px;

                >.tile-thumbnail{
                        height:200px;
                        overflow:hidden;
                        position: relative;

                        img{
                                width:100%;
                                position: absolute;
                                top:0;
                                bottom:0;
                                left:0;
                                right:0;
                                margin:auto;
                        }
                }

                >.tile-title{
                        background-color: #fff;
                        padding:30px 20px; 

                        >h3{
                                font-size:19px;
                                font-weight: 600;
                                margin:0;
                                display: inline-block;

                                > a{
                                        color:#4e5a64;

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

                        i {
                                float: right;
                                font-size: 24px;
                                margin:0 5px;
                        }

                        >.tile-desc{
                                font-size: 14px;

                                >p{
                                        margin:20px 0 0 0;

                                        >a:hover{
                                                text-decoration: none;
                                        }
                                }
                        }
                }
        }
} 


// SEARCH PAGE 5
.search-content-4{
        .search-bar{

                .extra-buttons{

                        button{
                                margin-right: 20px;

                                &:last-child{
                                        margin-right: 0;
                                        width:170px;
                                }
                        }
                }
        } 

        .search-table{
                th{
                        border:none;

                        > a{
                                color: #fff;    

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

                th, td{
                        padding:20px 30px;
                        vertical-align: middle;
                }

                td{
                        border-color: #fff;
                }
                
                .table-status{
                        text-align: center;

                        i{
                                font-size:26px;
                                padding-top: 10px;
                        }
                }

                .table-date{
                        font-weight: 600;
                        font-size: 14px;
                        width:180px;

                        a{
                                color:#49a7fa;

                                &:hover{
                                        text-decoration: none;
                                        color:#326b9e;
                                }
                        }
                }

                .table-title{
                        width:390px;

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

                                >a{
                                        color:#4e5a64;

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

                        > p{
                                margin-bottom: 0;
                                margin-top: 10px;

                                >a{
                                        color:#49a7fa;

                                        &:hover{
                                                text-decoration: none;
                                                color:#326b9e;
                                        }
                                }
                        }
                }

                .table-desc{
                        font-size: 14px;
                        color:#8b96a4;
                }

                .table-download{
                        text-align: center;

                        i {
                                font-size: 30px;
                                padding-top: 10px;
                        }
                }
        }
}


// END

// MOBILE

@media (max-width:1024px){
        .search-content-4{
                .search-bar{

                        .extra-buttons{
                                margin-top:30px;
                        }
                }

                .search-table{
                        th, td{
                                vertical-align: top;
                        }

                        .table-date{
                                width:auto;
                        }

                        .table-title{
                                width:auto;
                        }
                }
        }
}

@media (max-width:991px){

        .search-bar{
                .search-desc{
                        margin-top:20px !important;     
                }
        }

        .search-pagination{
                margin-bottom: 40px;
        }

        .search-content-2{

                .search-container{

                        .search-item{
                        
                                >.search-content{

                                        &.text-left{
                                                text-align: left;
                                        }

                                        .search-desc{
                                                margin-bottom:40px;
                                        }
                                }
                        }
                }
        }

} 

@media (max-width: 767px){
        .search-content-2{

                .search-container{

                        .search-item{
                        
                                >.search-content{
                                        text-align: center;
                                        
                                }
                        }
                }
        }
}