egroupware/pixelegg/less/layout_raster_sidebar.less

/**
 * EGroupware: Stylite Pixelegg template
 *
 * Definitions for layout and raster
 *
 * Please do NOT change css-files directly, instead change less-files and compile them!
 *
 * @link http://www.egroupware.org
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @author Stefan Reinhardt <stefan.reinhardt@pixelegg.de>
 * @package pixelegg
 * @version $Id: layout_raster.less 3170 2014-07-16 11:24:38Z pixelegg $
 */
/*
    Created on : 23.07.2014, 13:25:11
    Author     : stefanreinhardt
*/

@import (reference) "definitions.less";

/* ################################################################################################################
 * Sidebar
 * ################################################################################################################*/

// AREA UNDER LOGO
#egw_fw_sidebar {
    position: fixed;
    overflow: hidden;
    top: 43px;
    left: 0px;
    bottom: 20px;
    width: 225px;
    /*.background_color_5_gray;*/

    //SIDE AREA
    #egw_fw_sidemenu {
        position: absolute;
        top: 3px;
        bottom: 4px;
        left: 4px;
        right: 8px;
        overflow: hidden;
        z-index: 0;
        padding-top: 0.6em;
        font-size: 0.9em;

        // SIDE AREA
        .egw_fw_ui_scrollarea_outerdiv{
            .background_color_5_gray;
			border-radius: 5px;

            //####################################################
            // AREA for
            // DRAG AND DROP
            div.ui-sortable {

				div {
					padding: 3px 0 1px 3px;
					cursor: pointer;
				}
			}


            //####################################################
            // All Tabs
            // DRAG AND DROP
            .egw_fw_ui_sidemenu_entry_header {
                                            display: block;
                                            margin: 0 0;
                                            /*padding: 0px 5px 5px 10px;*/

                                            &:hover {
                                                .background_color_15_gray;
                                                .rounded(5px);
                                            }

                                            &:active {.box_shadow_standard_light_inset;}


                                            h1 {
                                                margin: 0 0 10px 0;
                                                padding-top: 0.4em;
                                                padding-left: 3em;
                                                .color_40_gray;
                                                /*font-size: 12px;*/
                                                .fontsize_l;
                                                line-height: 17px;
                                            }

                                            object {background-color: @gray_0; .dimension_width_height_m;}

                                        }



            //       ####################################
            //     ####                                 #
            //   ###   IMG  |  ADD NAME                 #
            // ###                                      #
            // ###                                      #
            //###########################################
            // aktive APP
            // aktiver Tab
            // rounded Corner Left Top
            .egw_fw_ui_sidemenu_entry_header_active {
                //
                cursor: pointer;
                background-image: url("../images/clear.png");
                background-position: 95% -3000px;
                background-repeat: no-repeat;

                .background_color_0_gray;
                .border_radius ( 0px, 0px, 0px, 27px );
                .bordered (@gray_30, @gray_30, @gray_30, @gray_30);

                margin: 0 0 0 0;
                border-bottom: none;
                height: 33px;


                img {padding-left: 9px; padding-top: 7px; height: 18px;}

                h1 {text-transform: uppercase;font-size: 1.4em;.color_100_gray;padding-top: .8em;}

                &:active {.box_shadow_standard_light_active; .border_radius ( 5px, 0px, 0px, 27px );}
				&:hover {
					img {
						content: url(../images/reload.png);
					}
				}
                &:focus {
                    background-image: url("../images/ajax-loader.gif");
                    background-repeat: no-repeat;
                    background-position: 90% 50%;
                    .Complete_Button_active;

                    .background_color_25_gray;
                }

                object {
                    margin-left: 14px;
                    margin-top: 8px;
                    .rounded (3px;);
                    .dimension_width_height_s;
                }

                .egw_fw_ui_ajaxloader {margin-top: -26px;}

            }

            //####################################################
            // Rahmen um APP Einstellungen
            // egw_fw_ui_sidemenu_entry_content
            // ########################################
            // ##                                    ##
            // ##                                    ##
            // ########################################

            // ########################################
            // ##                                    ##
            // ##                                    ##
            // ########################################

            // ########################################
            // ##                                    ##
            // ##                                    ##
            // ########################################

            // ########################################
            //  ##        div.egw_fw_ui_category     ##
            //   ##       &:nth-last-of-type(-n+3)   ##
            //    #####################################





            .egw_fw_ui_sidemenu_entry_content {
                display: block;
                background-image: none;
                .border_radius (0, 0, 27px, 0);
                border-color: @gray_30;
                border-style: solid;
                border-width: 1px;
                margin: 0 0 2em 0;


                // rounded Corner on bottom
                &:nth-last-of-type(-n+3)   {
                    .background_color_0_gray;
                    .border_radius (0, 0, 24px, 0);
                    border-color: @gray_30;
					border-right: 0px;
					margin-bottom: 10px;
					border-top-color: white;
					padding-top: 8px;
                }

               & > div {}

                //###################################################
                // *letztes Element   */
                // has round corners
                div.egw_fw_ui_category:nth-last-of-type(-n+3) {
                    .border_radius (0, 0, 15px, 0);
                }

                //###################################################
                // Schaltflächen - Elements
                // Normal
                .egw_fw_ui_category {
                    margin: 4px 5px 5px 5px;
                    padding: 0.5em 1em 0.5em 0;
                    cursor: pointer;
                    //																												border-top: 7px solid;
                    border-color: @gray_30;
                    background-color: @gray_10;

                    /*background-color: @egw_color_2_d;*/

                    .border_radius(3px,3px,3px,3px);

                    h1 {
                        margin: 5px 0px 3px 5px;
                        padding: 0px 0px 0px 15px;
                        line-height: 1em;
                        .fontsize_l;
                        background-image:url(../images/arrow_right.png);
                        background-repeat:no-repeat;
                        background-position:left center;
                    }

                    div.egw_fw_ui_category:nth-last-of-type(-n+3) {
						img.egw_fw_ui_sidemenu_listitem_icon {
							display: block;
						}
                    }

                }

                //#################################
                // Hover
                // on Mouse over change color
                .egw_fw_ui_category:hover {
                    .background_color_40_gray;
                    padding: 0.5em 1em 0.5em 0;
                }



                /*######################*/
                // Active State
                // change Background color in Blue
                // See all Elements
                .egw_fw_ui_category_active {
                    border-bottom-width: 0px;
                    margin-top: 4px;

                    background-color: @egw_color_2_a;

                    /*.background-color-50-gray;*/
                    .color_5_gray;
                    .border_radius(3px,3px,3px,3px) !important;

                    h1 {
                        background-image:url(../images/arrow_down_white.png);
                        line-height: 1em;
                        font-size: 12px;

						a {
							color: #FFF;

							img {.dimension_width_height_s;}

							&:hover {
								padding: 5px 30px 5px 0px;
								width: 200px;
								.background_color_10_gray;
								.color_50_gray;
								.Complete_Button_hover;
							}
						}
					}

                    &:hover {background-color: @egw_color_2_d; .transition (0.2s, ease-out);}
                }
            }

            .egw_fw_ui_sidemenu_entry_content_bottom {
                border-width: 0px 1px 1px 1px;
            }
            .egw_fw_ui_sidemenu_entry_header_bottom {
                border-width: 0px;
                border-color: @gray_0;
            }

            .egw_fw_ui_sidemenu_entry_icon {
                                        display: inline-block;
                                        .dimension_height_m;

                                        padding-left: 0;
                                        padding-right: 0px;
                                        float: left;

                                        /*filter grey*/
                                        .img_filter_gray;
                                    }
        }


    } // SIDEMENU ENDE


    /*#################################*/
    // Trenner (Splitter)
    #egw_fw_splitter {
        position: absolute;
        width: 8px;
        top: 40px;
        bottom: 3px;
        right: 0px;
		border-top:1px solid;
		border-left: 1px solid;
		border-color:@gray_30;
        &:hover {background-color: @egw_color_1;}
    }

	// Toggle menu
	#egw_fw_toggler {
		display: block;
		width: 30px;
		height: 30px;
		position: relative;
		z-index: 1;
		top: 5px;
		margin-top: 0;
		margin-bottom: -30px;
		float: right;
		span {
			background-color: transparent;
			&:before{
				transition-duration: 0.7s;
				-webkit-transition-duration: 0.7s;
				-moz-transition-duration: 0.7s;
				transform: rotate(145deg) translate(8px, -2px);
				-ms-transform: rotate(145deg) translate(8px, -2px);
				-moz-transform: rotate(145deg) translate(8px, -2px);
				-webkit-transform: rotate(145deg) translate(8px, -2px);
				background-color: #b4b4b4;
			}
			&:before, &:after {
				content: "";
				position: absolute;
				left: 0;
				top: -9px;
				width:10px;
				height: 2px;
				background-color: #606060;
				backface-visibility: hidden;
				border-radius: 2px;
			}
			&:after {
				top:9px;
				transition-duration: 0.7s;
				-webkit-transition-duration: 0.7s;
				-moz-transition-duration: 0.7s;
				transform: rotate(-145deg) translate(8px, 2px);
				-ms-transform: rotate(-145deg) translate(8px, 2px);
				-moz-transform: rotate(-145deg) translate(8px, 2px);
				-webkit-transform: rotate(-145deg) translate(8px, 2px);
				background-color: #606060;
			}
			position: relative;
			display: block;
			width: 100%;
			height: 5px;
			backface-visibility: hidden;
			border-radius: 2px;
			top:11px;
			left:10px;
		}
	}
	#egw_fw_sidemenu.egw_fw_sidebar_toggleOn {
		/* toggler button*/
		#egw_fw_toggler {
			margin: 1px auto 4px;
			float:none;
			span {
				background-color: #b4b4b4;
				transition: all 0.3s;
				-webkit-transition: all 0.3s;
				-moz-transition: all 0.3s;
				left:0;
				&:before, &:after {
					transform:none;
					-ms-transform: none;
					-moz-transform: none;
					-webkit-transform: none;
					width:100%;
					height:5px;
					background-color: #b4b4b4;
				}
			}
			&:hover {
				span {
					background-color: #606060;
					&:before {
						background-color: #606060;
					}
					&:after {
						background-color: #606060;
					}
				}
			}
		}

		/*sidebar adjustments*/
		.egw_fw_ui_sidemenu_entry_content {
			display: none !important;
		}

		.egw_fw_ui_sidemenu_entry_header_active {
			border-radius: 0 !important;
			width: auto !important;
			border:0;
		}
		.egw_fw_ui_sidemenu_entry_header {
			width: 50px;
			height: 35px;
			h1 {
				visibility: hidden;
			}
			img {
				margin: 4px auto 0px !important;
				padding: 0 !important;
				float: none !important;
				display: block !important;
				height: 24px !important;
			}
		}
	}
    // Ende Sidebar

// Menu Seite links
}


/** DON"T MOVE THIS **/
.egw_fw_ui_splitter_vertical {
	background-image: url(../images/splitter_vert.png);
	background-position: center;
	background-repeat: no-repeat;
	.background_color_0_gray;
	position: absolute;
	width: 5px;
	height: 100%;
	cursor: col-resize;
}




            //####################################################
            // Submenu / Unterpunkte in der Seitenleiste

            // ########################################
            // ##                                    ##
            // ##                                    ##
            // ##  #############################     ##
            // ##  #.egw_fw_ui_category_content#     ##
            // ##  #############################     ##
            // ##                                    ##
            // ########################################

            // ########################################
            // ##                                    ##
            // ##                                    ##
            // ########################################

            // ########################################
            // ##                                    ##
            // ##                                    ##
            // ########################################



.egw_fw_ui_category_content {
    .background_color_0_gray;
    border-top-width: 0;
    border-left: 0px solid;
    border-bottom: 0px solid;
    margin-left: 4px;
    margin-top: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-top: 3px;
    margin-right: 5px;
    /*min-height: 50px;*/

            // Last Element rounded
                    &:last-of-type{
                    .border_radius (0, 0, 10px, 0);
                    border-color: @gray_30;
					margin-bottom: 5px;
                }

                img { .dimension_height_s; vertical-align: middle;}

                &:hover {
                    .background_color_0_gray;
                    border-color: @gray_50;
                }

    input#uical_select_owner_multiple{
        .dimension_height_s;
        vertical-align: middle;
    }

    // Favoriten anlegen und löschen
    .sidebox-favorites{} // ist in etemplate2.less definiert

	.egwTutorial div#list_grid_wrapper {
		border-bottom-left-radius: 10px;
		overflow-x:hidden !important;
		.et2_label {
			padding-bottom: 5px;
		}
	}
}


            //####################################################
            // Submenu / Unterpunkte in der Seitenleiste

            // ########################################
            // ##                                    ##
            // ##                                    ##
            // ##  #############################     ##
            // ##  #.egw_fw_ui_category_content#     ##
            // ##  #############################     ##
            // ##  #                           #     ##
            // ##  # .egw_fw_ui_sidemenu_listitem    ##
            // ##  #                           #     ##
            // ##  #############################     ##
            // ##                                    ##
            // ########################################

            // ########################################
            // ##                                    ##
            // ##                                    ##
            // ########################################

            // ########################################
            // ##                                    ##
            // ##                                    ##
            // ########################################



// Sub Sub Menu Item

.egw_fw_ui_sidemenu_listitem {

    padding: 9px 0px 0px 0px;
    margin: 0px 0 1px 0px;
    position: relative;
    min-height: 18px;
    background-color: @gray_0;

   // Submenu Hover Item - gelb
    &:hover{
        .color_100_gray;
        background-color: @egw_color_1_e;

    }


    // Icon before
    img.egw_fw_ui_sidemenu_listitem_icon {
        /*display: none;*/
        .dimension_width_height_xs;
        padding: 0px;
        margin: 0px 5px;
        float: left;

    }

    input {
        height: 16px;
        width: 81% !important;
    }

    input[type="image"] {
        height: 10px;
        width: 10px !important;
        margin-left: 1px;
    } // mehrere Benutzer auswählen

    select { max-width: 85% !important; }

    // Icon rechts der Liste - Auswahl Button
    img {
        height: 9px;
        width: 9px;
        padding: 0px;
        float: right;
    }

    // normale Links
    a {
        // .Complete_Button_text;
        padding: 5px 0px 5px 5px;
        text-decoration: none;
        min-width: 5em;
        vertical-align: bottom;

        &:hover{
            .color_100_gray;
        }

        &:active {
            .box_shadow_standard_light_inset;
        }
    }


    div {
        a:first-child{
            .Complete_Button_text;
            //		padding: 2px;
            //		padding: 5px 30px 5px 0px;
            width: 72% !important;
            //		background-color: red;
        }

        a:first-child:hover {
            //          .Complete_Button_text_hover;
            //          .background-color-30-gray;
            //          padding: 5px 30px 5px 0px;
            //          width: 200px;
        }

        //löschen
        a:nth-child(2){
            position: absolute;
            right: 0;
            top: 0;
            background: transparent;
            padding: 0px 2px 0 2px;
            width: 10px;
            min-width: 5px;

            img {
                margin: 0 0 0 0;
                padding: 0em 0em 0 0em;
                height: 10px;
                width: 10px;
            }
        }

        a:nth-child(2):hover {
            background-color: @color_warning;
            .Complete_Button_Icon_hover ;
            .color_0_gray;
            //		width: auto;
        }
    }


} // .egw_fw_ui_sidemenu_listitem