egroupware_official/pixelegg/less/layout_raster_buttons.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";


/*#################################################
    Add / Print / Logout /
    - Name / Date
###################################################*/
/*#egw_fw_topmenu_addons{}*/



// Button Logout
#egw_fw_logout {
    background-image: url(../images/logout.png);
    background-size: 16px 16px;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    float: right;
    margin-right: 1em;
    margin-top: 0px;
    z-index: 200;
    .Button_size_square_16;
    /*.border_normal;*/
    /*.box_shadow_standard_light;*/
    /*.border_radius_button_normal;*/
    padding: 0.5em;
    top: 5px;
    position: fixed;
    right: 0px;


    &:hover {.box_shadow_standard_light_hover;}
    &:active {.Complete_Button_active;}
    &:focus {.box_shadow_standard_light_inset;}
}



// Button Print

#egw_fw_print {
    background-image: url(../images/print.png);
    background-size: 16px 16px;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    float: right;
    margin-right: 5px;
    margin-top: 0px;
    position: fixed;
    .Button_size_square_16;
    /*.border_normal;*/
    /*.box_shadow_standard_light;*/
    /*.border_radius_button_normal;*/
    padding: 0.5em;
    top: 5px;
    right: 40px;
    z-index: 200;
    &:hover {.box_shadow_standard_light_hover;}
    &:active {.Complete_Button_active;}
    &:focus {.box_shadow_standard_light_inset;}

}


/*#################################################
/* Second Line
/* e.g. Name / Datum / angemeldete User
###################################################*/


#egw_fw_topmenu_info_items {

    // move to bottom of the page
    position: fixed;
    z-index: 1000;
    bottom: 2px;
    right: 5px;
    padding-right: 20px;


    .topmenu_info_item {

        overflow: visible;
	display: inline-block;

        // Info Bell
        &:nth-child(1) {
        }

        // Name
        &:nth-child(2) {
            /*float: right;*/
            margin-top: 0;
            font-size: 1em;
            padding-right: 5px;

        }

        // angemeldete User
        &:nth-child(3) {
            position: relative;
            top: 0px;
            display: inline-block;

            &:hover {.box_shadow_standard_light_hover;}
            &:focus {.box_shadow_standard_light_inset;}

            /*&:before {content: "";font-size: 1em;color: @egw_color_2_a;}*/

        }

        // Add
        &:nth-child(4) {

        }

    }

    /*Notification*/
    #topmenu_info_notifications {}

    /*user info*/
    #topmenu_info_user_info {
		display: inline-block;
	}

    /*current user info*/
    #topmenu_info_current_users {}

    /*current user info*/
    #topmenu_info_current_users {}

    /*time zone*/
    form { height: 0px;
           select {padding: 0px;}
    }

    /*quick*/
    #topmenu_info_quick_add {

		// ##############################################################################
		// quick_add
		// Fist you see an ADD Icon, via Mouseover it expand right, to an select field

		span#quick_add {
			/*border: 1px solid rgba(0, 0, 0, 0.15);*/
			/*box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);*/
			float: right;
			padding: 0.5em;
			position: fixed;
			right: 80px;
			top: 5px;

			background-image: url(../images/add.png);
			background-repeat: no-repeat;
			background-size: 20px 20px;
			background-position: 4px 4px;

			.border_radius_button_normal;
			.dimension_width_height_s;

			&:before {
				content: " ";
				font-size: 2em;
				color: @egw_color_2_a;
				line-height: 0.6em;
				background-color: white;
			}

			&:hover {.box_shadow_standard_light_hover;}
			&:focus {.box_shadow_standard_light_inset;}
		}

		// ##############################################################################
		// quick_add selectbox
		// ADD different APPs

		.chzn-container {
			position: fixed;
			right: 15px !important;
			top: 40px;
			width: 160px !important;
			background: @gray_0;
			&:before {
				content: '';
				position: absolute;
				bottom: 50%;
				left: 42%;
				width: 0;
				height: 0;
				border-left: 15px solid transparent;
				border-right: 15px solid transparent;
				border-bottom: 12px solid #aaa;
				margin-bottom: 12px;
				margin-left: 0px;
			}
			&:after {
				content: '';
				position: absolute;
				bottom: 50%;
				left: 42%;
				width: 0;
				height: 0;
				border-left: 15px solid transparent;
				border-right: 15px solid transparent;
				border-bottom: 12px solid #ffffff;
				margin-bottom: 11px;
			}
			.chzn-single span {display: none;}
		}



		select#quick_add_selectbox {
			visibility: hidden;
		}

    }

    // ##############################################################################
    // JS ERROR BUTTON
    // blinking red IMG
    img#topmenu_info_error{
                            .dimension_width_height_s;
                            position: fixed;

                            /*.Button_size_square_16;*/

                            .border_normal;
                            .box_shadow_standard_light;
                            padding: 5px;
                            top: 6px;
                            right: 112px;
                            z-index: 200;
                            &:hover {.box_shadow_standard_light_hover;}
                            &:active {.Complete_Button_active;}
                            &:focus {.box_shadow_standard_light_inset;}

                            background-color: @color_warning;


                            //blinking
                            -moz-transition:all 1s ease-in-out;
                            -webkit-transition:all 1s ease-in-out;
                            -o-transition:all 1s ease-in-out;
                            -ms-transition:all 1s ease-in-out;
                            transition:all 1s ease-in-out;
                            /* order: name, direction, duration, iteration-count, timing-function */
                            -moz-animation:blink normal 2s infinite ease-in-out; /* Firefox */
                            -webkit-animation:blink normal 2s infinite ease-in-out; /* Webkit */
                            -ms-animation:blink normal 2s infinite ease-in-out; /* IE */
                            animation:blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */

                           }



                            @-moz-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Firefox */
                            @-webkit-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Webkit */
                            @-ms-keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* IE */
                            @keyframes blink {0%{opacity:1;} 50%{opacity:0;} 100%{opacity:1;}} /* Opera and prob css3 final iteration */

}


// Update images
div#topmenu_info_update{

    display: inline-block;

    img{ .rounded(5px);}


}