client_area.less

/*
TODO namespace all these
build: lessc --source-map  client_area.less client_area.css

*/


/*
this is the overall content area. customise it for your site
*/
#ca_content_area
{
    width: 100%;
    text-align: left;
    float: left;
}

#ca_menu
{
    width: 100%;
}



/*
Advanced users only beyond this point!
*/

/*
  Font sizes: basically this app. does little with font sizes and will pick up whatever is set on the containing element.
  In a few places we set font-size explicitly where otherwise it might overflow from a container. E.g for image labels. Just search for font-size.
  

*/

/*
  LESS VARIABLES
  
*/
  
@small-text: 10px;
@medium-small-text: 15px;
@thumb-title-background: #000000;
@thumb-title-text: #ffffff;
@menu-background: #eeeeee;


/* Global reset attempt */

.ca_content_area *
{
    box-sizing: content-box;
}



.ca_message_area
{
    font-size: 100%;       
}

.ca_label
{
    font-size: @small-text;
}
.ca_padded_box
{
    padding: 10px;
}

.ca_proofs_thumbs
{
   float: left; 
}

.ca_proofs_confirm
{
    text-align: center;
    padding-top: 10px;

}

.print_login button
{
    margin-top:20px;
}


.ca_standard_button
{

    width: 100px;
}

.ca_large_button
{

    width: 200px;
}


.ca_login_button
{
    margin-left: auto;
    margin-right: auto;

}

.clear, .ca_clear {
    clear: both;
}

.ca_select_box
{
    margin-top: 10px;
    margin-bottom: 5px;
}

.ca_human_name
{
    text-decoration: underline;
}

.ca_menu_bar
{
    background-color: @menu-background;
    padding: 10px 10px 5px 10px;
    border-bottom: 1px solid #A9A9A9;  
}
.ca_menu_bar::after
{
    display: table;
    content: '';
    clear: both;
}    


.ca_counter_label
{
    min-width: 50px;
    display: inline-block;
}


.ca_counter
{
    min-width: 25px;
    display: inline-block;
    text-align: left;
}



.ca_thumb_pic
{
    float: left;
    margin-right: 20px;
    margin-top: 10px;
    overflow: hidden;
}

.ca_thumb_pic span
{
    font-size: @small-text;
}

.ca_print_thumb_pic.has_order img
{
    border: 1px solid #ff0000;
}

.ca_proof_thumb_pic input[type="checkbox"]
{
    float: left;
}

.ca_thumb_pic img
{
    cursor: pointer;
    display: block;
}

.ca_thumb_pic .ca_label
{
    float: left;
}

button.ca_proof_button, button.ca_logout_button
{
    margin-right: 10px;
}

button.ca_menu_button
{
    margin-right: 5px;
}

.ca_counter_box
{
    display: inline-block;
}

.ca_menu_buttons
{
    float: right;    
}

.ca_page_buttons
{
    float: left;
}


.ca_pagination
{
    min-width: 50px;
    display: inline-block;
}



.ca_highlighted_pagination
{
    font-weight: bold;
    border: 1px solid #000000;
}

.ca_page_info
{
    display: inline-block;
}

.ca_proofs_page
{
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
}


/* label underneath main lightbox image */                  
.ca_lightbox_controls
{
    font-size: @medium-small-text;
    height: 15px;
}

.ca_lightbox_controls input[type="checkbox"]
{
    float: left;
}

.ca_lightbox_label
{
    float: left;
    margin-left: 5px;
    display: inline-block;
}

.ca_lightbox_overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url("client_area_overlay.png") repeat;
    text-align:center;
    z-index: 1000;
}

.ca_message_pop_up
{
    width: 200px;
    z-index: 1000;
    background-color:  #ffffff;
    border: 1px solid #000000;
    position: absolute;
    padding-bottom: 5px;

}

.ca_popup_close_bar
{
    background-color: @menu-background;
    width: 100%;
    height: 30px;
    

}

.ca_popup_close
{
    float: right;
    font-size: @medium-small-text;
    background-color: #a9a9a9;
    cursor: pointer;
    margin-right: 5px;
    margin-top: 2px;
    display: flex;
    align-items: center;
}





.ca_popup_text
{
    padding: 5px;
}

.ca_button_left
{
    margin-right: 5px;
}

.ca_error
{
    color: #ff0000;
    display: block;
    width: 100%;
    text-align: center;
}

.ca_lightbox
{
    border: 1px solid #000000;
    position: absolute;
    display: block;
    background-color: #ffffff;
    z-index: 1001; /* > than for #ca_lightbox_overlay */
}

.ca_lightbox.ca_proofs
{
    top: 10%;
    left: 50%;
}

.ca_lightbox.ca_prints
{

    top: 0px;
    left: 0px;
}

.ca_print_login.ca_additional_instructions
{
    margin-top: 20px;
}

.ca_login_error
{
    display: inline-block;
    width: 100%;
    color: #ff0000;
}

/*

below here are rules which are responsive
the defaults will apply for devices >= 768px wide
then the same rules are redefined for < 768px;

NB. For responsiveness to work as expected your container page should include something like:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

*/

.ca_your_print_label
{
    float: left;
    width: 240px;
    margin-top: 10px;
}
.ca_your_print_field
{
    float: left;
    width: 240px;
    margin-top: 10px;

}

.ca_print_login
{
    margin-top: 20%;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

}

.ca_proofs_box
{
    width: 200px;
    height: 100px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
    margin-left: auto;
    margin-right: auto;

}

/*
    this is about the alignment of controls on the login page on mobile
    TODO may need improving        not mobile first 
*/

@media only screen and (max-width : 767px)   {

    .ca_your_print_label
    {
        float: none;
        width: auto;
        margin-top: 10px;
    }
    .ca_your_print_field
    {
        float: none;
        width: auto;
        margin-top: 10px;
    }

    .ca_print_login
    {
        margin-top: 20%;
        width: auto;
        margin-left: 0px;
        margin-right: 0px;
        text-align: left;
    }

    .ca_proofs_box
    {
        margin-left: 0px;
        margin-right: 0px;
    }

}





.ca_row_header
{
    font-weight: bold;
    margin-bottom: 25px;
    margin-top: 10px;
}




.ca_form_control
{
    
}

.ca_qty_input
{
   
}

.ca_order_info
{
    color: #ff0000;
}

.ca_edit_icon
{
    display: inline-block;
    width: 15px;
}

.ca_proofs_popup, .ca_prints_popup
{
    text-align: center;
    left: 0px;
    top: 0px; 
    border: 1px solid #000000;  
    background-color: #ffffff;
    z-index: 1001;
    position:absolute;
    padding-bottom: 10px;
    width: 50%;
    height: 90%;
    margin-left: 25%;

}

.ca_prints_popup .ca_container_fluid
{
    height: 90px;
    overflow-y: scroll;
}

.ca_prints_popup .ca_lightbox_image
{
    height: ~"calc(90% - 100px)";    
}

.ca_proofs_popup .ca_lightbox_image
{
    height: ~"calc(90% - 20px)";
}

.ca_prints_popup .main_image, .ca_proofs_popup .main_image
{
    background-size: contain;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
   
}

.ca_form select, .ca_form input, .ca_form_label, .ca_breadcrumbs
{
    font-size: @medium-small-text;
}

.ca_form_group
{
    margin-bottom: 5px;
}

.ca_breadcrumbs, .ca_message_bar
{
    margin-top: 5px;
    background-color: @menu-background;
    width: 100%;
    padding: 2px;
}

.ca_breadcrumbs
{
     margin-bottom: 5px;
}

.ca_message_bar
{
    margin-bottom: 10px;
}

.ca_error_message
{
    color: #ff0000;    
}

.ca_bold_label
{
    font-weight: bold;
}

.ca_spacer
{
    height: 25px;
}



.ca_breadcrumb_in_chain
{
    text-decoration: underline;
}

.ca_breadcrumb_active
{
    cursor: pointer;
}

.ca_input, .ca_form_control
{
    max-width: 100%;
    
}

.ca_input_expanded
{
    width: 100%;
}

.ca_input
{
    width: 100px;
}

.ca_action_button
{
    cursor: pointer;
}





.ca_clipper
{
    overflow: hidden;
}



.ca_basket_thumb img
{
    height: 50px;
    width: auto;
    cursor: pointer;
    
}


.ca_title
{
    background-color: @thumb-title-background;
    color: @thumb-title-text;
    font-size: @small-text;
    padding: 4px;
    position: absolute;
    bottom: 0px;
   
}

.ca_align_left
{
    float: left;
}

.ca_nav_icons
{
    position: absolute;
    z-index: 100;
    top: 50%;
    color: #ffffff;
    cursor: pointer;
    padding: 0px 5px;
    border-radius: 5px;
    background-color: rgb(125,125,125,0.2) ;
    
}

.ca_light_box_left 
{
    left: 10px ;   
}

.ca_light_box_right 
{
    right: 10px;    
}

.ca_hide
{
    display: none;
}

.ca_show
{
    display: block;
}

//RESPONSIVE

.ca_container_fluid
{
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

.ca_container_fluid * 
{
    box-sizing: border-box;
}




.ca_row
{
     margin-right: -15px;
     margin-left: -15px;   
     margin-bottom: 5px;
    
}

.ca_row::before
{
    display: table;
    content: ' ';
    
}

.ca_row::after
{
    display: table;
    content: ' ';
    clear: both;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-6, .col-xs-9, .col-xs-12  
{
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}





@media (min-width: 768px) 
{ 

    
    .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-6, .col-xs-9, .col-xs-12  
    {
        position: relative;
        min-height: 1px;
        padding-right: 15px;
        padding-left: 15px;
        float: left;
    }
    
    .col-xs-1
    {
        width:  8.33333333%;
    }

    .col-xs-2
    {
        width:   16.66666667%;
    }
    
    .col-xs-3
    {
        width: 25%;
    }
    
    .col-xs-6
    {
        width: 50%;
    }
    
    .col-xs-9
    {
        width: 75%;
    }
    
     .col-xs-12
    {
        width: 100%;
    }

}