egroupware/pixelegg/less/layout_raster_main.less
Hadi Nategh 11d4aaf7c1 Some UI/UX improvements:
- Fix tabs headers alignment and resize
- Implement a loading page to obscure actual DOM rendering from user's view
2019-08-06 10:00:53 +02:00

193 lines
5.3 KiB
Plaintext

/**
* 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";
/* ##################################################################################################
* Main
// ##################################################################################
// ## egw_divLogo ## Toggle up / down | egw_fw_topmenu #
// ## ## #
// ##################################################################################
// ## ## #
// ## ## #
// ## ## #
// ## ## #
// ## ## #
// ## SIDEBAR ## MAIN #
// ## ## #egw_fw_main #
// ## ## #
// ## ## #
// ## ## #
/* #####################################################################################################
*/
#egw_fw_basecontainer.egw_fw_sidebar_toggleOn {
#egw_fw_main {
#egw_fw_tabs {
.egw_fw_ui_tabs_header {
padding-left: 235px;
}
}
}
}
#egw_fw_main {
padding: 0;
width: auto;
// #######################################
// AREA for Content
#egw_fw_tabs{
position: relative;
background-color: transparent;
float: left;
width: 100%;
.egw_fw_ui_tabs_header {
margin: 0px 0 0 0;
padding: 0px 250px 0px 60px;
background-position: bottom;
background-repeat: repeat-x;
background-color: transparent;
height: 39px;
h1 {
display: inline;
width: 100%;
text-align: center;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
img{
text-align:center;
float: none;
margin: 0 auto;
.dimension_width_height_s;
}
.egw_fw_ui_tab_header {
padding-left: 0;
position: relative;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0px 5px 0px 0px;
cursor: pointer;
background-repeat:repeat-x;
height: 100%;
&:hover {
background-color: @color_hover_row;
padding-bottom: 0px;
padding-top: 8px;
transition: none;
.egw_fw_ui_tab_close_button {
background-image: url(../images/close.svg);
}
}
&:hover:not(.egw_fw_ui_tab_header_active)
{
.egw_fw_ui_tab_close_button {
top: 8px;
}
}
// APP Name
h1 {
.fontsize_m;
line-height: 1em;
margin:0 15px 2px 2px;
vertical-align: super;
}
// Images
img.egw_fw_ui_tab_icon {
display: inline-block;
.dimension_width_height_s;
margin: 5px 1px 0 1em;
.img_filter_gray;
}
}
/*active Tabs*/
.egw_fw_ui_tab_header_active {
border-left: 1px solid #bfc0bf;
border-right: 1px solid #bfc0bf;
border-bottom: 4px solid white !important;
.background_color_0_gray ;
background-image:none !important;
&:hover {
.background_color_0_gray;
padding-top: 0px;
}
// aktive Bilder
img.egw_fw_ui_tab_icon {
padding-top: 3px;
display: inline-block;
.dimension_width_height_s;
}
}
}
// #################
// # close x #
// # #
// #################
.egw_fw_ui_tab_close_button {
right: 3px;
top: 3px;
display: inline-block;
.dimension_width_height_xs;
margin-left: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: 6px 6px;
position: absolute;
}
// End of Tabs
}
// ################################
// Hover
// no effect ?
.egw_fw_ui_tab_header_hover{
background-color: @color_hover_row;
}
// Der eigentliche Inhalt der APP
// ############################################################
// # # # # # # # # # ####
// # # # # # # # # # ####
// ############################################################
//
// Content / Inhalt
//
// ############################################################
.egw_fw_ui_tab_content {
width: 100%;
padding: 0px;
margin: 0;
overflow-x: hidden;
overflow-y: hidden;
> div {
width: 100%;
padding: 0 0 0 0;
};
}
// Ende Main
}