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: 45px;
    left: 0px;
    bottom: 0px;
    width: 225px;

    //SIDE AREA
    #egw_fw_sidemenu {
        position: absolute;
        top: 1px;
        bottom: 1px;
        left: 0px;
        right: 8px;
        overflow: hidden;
        z-index: 0;
        font-size: 0.9em;
		border-right: 1px solid #bfbfbf;
        // SIDE AREA
        .egw_fw_ui_scrollarea_outerdiv{
            .background_color_5_gray;
            //####################################################
            // 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;
				&:hover {
					background-color: @color_hover_row;
				}
				&: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;
                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: 0;
					line-height: 33px;
					height: 33px;
					overflow: hidden;
					text-overflow: ellipsis;
				}
                &:active {}
				&:hover {
					background-image: url(../images/reload.png);
					background-size: 18px;
					background-position: 9px 6px;
					background-repeat: no-repeat;
					img {
						display: none !important;
					}
				}
                &: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-color: @gray_30;
                border-style: solid;
                border-width: 1px;
                margin: 0 0 2em 0;
				border-left: none;

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

               & > div {}

                //###################################################
                // *letztes Element   */
                // has round corners
                div.egw_fw_ui_category:nth-last-of-type(-n+3) {

                }

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

                    /*background-color: @egw_color_2_d;*/

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

                    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;
                }



                /*######################*/
                // 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;
                    .color_5_gray;
                    h1 {
                        background-image:url(../images/arrow_down.svg);
                        line-height: 1em;
                        font-size: 12px;
						background-size: 12px;
						filter: brightness(3);
						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 {

            }

            .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;
        &:hover {border-color: @gray_10;}
    }



    // Ende Sidebar

// Menu Seite links
}
#egw_fw_basecontainer {
	// Toggle menu
	#egw_fw_toggler {
		display: block;
		width: 51px;
		height: 45px;
		position: absolute;
		z-index: 1;
		margin-top: 0px;
		left: 0px;
		background-color: #fbfbfb;
		padding-left: 10px;
		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: 0px;
				top: 3px;
				width: 35px;
				height: 3px;
				background-color: #b4b4b4;
				backface-visibility: hidden;
				border-radius: 2px;
			}
			&:after {
				top:15px;
				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;
			}

			background-color: transparent;
			position: relative;
			display: block;
			width: 35px;
			height: 3px;
			backface-visibility: hidden;
			border-radius: 2px;
			top: 11px;
			left: 10px;
		}
		&:hover {
			span {
				&:before {
					background-color: #606060;
				}
				&:after {
					background-color: #606060;
				}
			}
		}
	}
}

#egw_fw_basecontainer.egw_fw_sidebar_toggleOn {
	/* toggler button*/
	#egw_fw_toggler {
		span {
			background-color: #b4b4b4;
			transition: all 0.3s;
			-webkit-transition: all 0.3s;
			-moz-transition: all 0.3s;
			left:5px;
			&:before, &:after {
				transform:none;
				-ms-transform: none;
				-moz-transform: none;
				-webkit-transform: none;
				width:35px;
				height:3px;
				background-color: #b4b4b4;
			}
			&:before {
				top: 10px;
			}
			&:after {
				top:20px;
			}
		}
		&:hover {
			span {
				background-color: #606060;
				&:before {
					background-color: #606060;
				}
				&:after {
					background-color: #606060;
				}
			}
		}
	}

	#egw_fw_sidemenu {
		top:1px;

		/*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;
			&:hover {
				background-size: 24px;
				background-position: 15px 8px;
			}
		}
		.egw_fw_ui_sidemenu_entry_header {
			width: 50px;
			height: 35px;
			h1 {
				visibility: hidden;
			}
			img {
				margin: 4px 13px 0px !important;
				padding: 0 !important;
				float: none !important;
				display: block !important;
				height: 24px !important;
			}
		}
	}
}
/** 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;
}
.egw_fw_ui_splitter.ui-draggable-dragging {
	background-color: #fbec88;
	border-left: 1px solid #B4B4B4;
	opacity: 1 !important;
}



.egw_fw_ui_splitter_hover {
	background-color: white;
}

            //####################################################
            // 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;
	overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

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

    }


    // Icon before
    img.egw_fw_ui_sidemenu_listitem_icon {
        /*display: none;*/
        .dimension_width_height_xs;
        padding: 0px;
        margin: 0px 6px;
        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 6px;
        text-decoration: none;
        min-width: 5em;
        vertical-align: bottom;
		.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