egroupware_official/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;
  	z-index:2;

    //SIDE AREA
    #egw_fw_sidemenu {
        position: absolute;
        top: 1px;
        bottom: 1px;
        left: 0px;
        right: 8px;
        overflow: hidden;
        z-index: 2;
        font-size: 0.9em;
		// 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("../../api/templates/default/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;
				white-space: nowrap;
				padding-left: 10px;
				&:hover {padding-left: 35px;}
			}
			&:active {}
			&:hover {
				background-image: url(../../node_modules/bootstrap-icons/icons/arrow-clockwise.svg);
				background-size: 18px;
				background-position: 9px 6px;
				background-repeat: no-repeat;
				img {
					display: none !important;
				}
			}
			&:focus {
				background-image: url("../../api/templates/default/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_bottom {
			border-width: 0px 1px 1px 1px;
		}

		.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;
		}
		.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: 0px;
				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,h2 {
					margin: 5px 0px 3px 5px;
					line-height: 1em;
					.fontsize_l;
					font-weight: normal;
				}
				h1::before,h2::before {
					.bootstrap-icons;
					content: "\f231";	// caret-right-fill
				}

				h2 {
					padding-bottom: 2px;
				}

				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;
				h1,h2 {
					.color_5_gray;
					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;
						}
					}
				}
				h1::before,h2::before {
					content: "\f229 ";	// caret-down-fill
				}

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

    } // SIDEMENU ENDE


    /*#################################*/
    // Trenner (Splitter)
    #egw_fw_splitter {
        position: absolute;
        width: 8px;
        top: 0px;
        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(../../api/templates/default/images/splitter_vert.png);
	background-position: center;
	background-repeat: no-repeat;
	background-color: @gray_10;
	position: absolute;
	width: 4px;
	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: @gray_20;
}

            //####################################################
            // 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: 0px;
    margin-top: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-top: 3px;
    margin-right: 0px;
    /*min-height: 50px;*/

            // Last Element
				&:last-of-type{
                    border-color: @gray_30;
					margin-bottom: -2px;
                }

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