egroupware/pixelegg/less/layout_raster_header.less
Hadi Nategh 7bb633f7d3 WIP framework style:
- Get toggle menu to the left side and shift the logo after it
- Restyle on toggled active heder
2019-05-31 15:44:02 +02:00

245 lines
5.2 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";
// Header
#egw_fw_header {
width: 100%;
float: left;
position: absolute;
border-bottom: 1px solid silver;
/* Logo EGW or Company - left top*/
#egw_divLogo {
float: left;
width: 255px;
display: block;
margin-left: 63px;
text-align: center;
height: 45px;
img {
max-width: 209px;
border: none;
}
}
/* ###########################################################################################################################################
Topmenu / Home / Einstellungen / Zugriff / Kategorien usw..
###########################################################################################################################################
*/
#egw_fw_topmenu ul,
#egw_fw_topmenu > * > ul > li,
.topmenu_info_item,
#egw_fw_topmenu_items,
#egw_fw_topmenu_info_items {
display: inline;
}
#egw_fw_topmenu{
position: absolute;
display: none;
right: 5px;
width: 241px;
z-index: 1000;
top: 46px;
background: white;
.box_shadow;
a.powered_by {
width: ~"calc(100% - 20px)";
display: inline-block;
padding: 10px;
font-size: 7pt;
background-color: #fbfbfb;
}
#egw_fw_topmenu_info_items {
display: inline-block;
background: white;
float: right;
height: auto;
padding-left: 10px;
border-top: 1px solid silver;
.topmenu_info_item {
overflow: visible;
display: inline-block;
&:nth-child(2) {
margin-top: 0;
font-size: 1em;
}
&:nth-child(3) {
position: relative;
top: 0px;
padding-left: 3px;
display: inline-block;
}
}
}
#egw_fw_topmenu_items {
padding-top: 14px;
width: 100%;
display: block;
float: right;
background: white;
height: auto;
z-index: 1000;
top: 45px;
ul {
width: 100%;
padding: 0px;
display: inline-grid;
li{
color: @gray_0;
padding: 8px 10px;
border-top: @gray_10;
&:hover{ background: @color_hover_row;color: @gray_0;}
a {
color: @gray_100;
text-decoration: none;
.fontsize_l;
padding-left: 26px;
line-height: 1.5em;
display:inline-block;
&:hover {
text-decoration: none !important;
}
}
}
/*Home*/
li:first-child{
:before{border: none;}
}
/*home*/
a#topmenu_home {
margin-left: 0px;
background-image: url(../images/topmenu_items/home.svg);
background-repeat: no-repeat;
background-size:16px;
}
/*Setup / Einstellungen*/
a#topmenu_prefs{
margin-left: 0px;
background-repeat: no-repeat;
background-size:16px;
background-image: url(../images/topmenu_items/setup.svg);
}
/*access / Zugriff */
a#topmenu_acl{
background-repeat: no-repeat;
background-size:16px;
background-image: url(../images/topmenu_items/access.svg);
}
/*category*/
a#topmenu_cats{
background-repeat: no-repeat;
background-size:16px;
background-image: url(../images/topmenu_items/category.svg);
}
/*password*/
a#topmenu_password{
background-repeat: no-repeat;
background-size:16px;
background-image: url(../images/topmenu_items/password.svg);
}
/*help*/
a#topmenu_manual{
background-repeat: no-repeat;
background-size:16px;
background-image: url(../images/topmenu_items/help.svg);
}
/*Search*/
a#topmenu_current_user{
background-repeat: no-repeat;
background-size:16px;
background-image: url(../images/users.png);
}
/*logout*/
a#topmenu_logout{
background-repeat: no-repeat;
background-size:16px;
background-image: url(../images/topmenu_items/logout.svg);
}
/*print*/
a#topmenu_print{
background-repeat: no-repeat;
background-size:16px;
background-image: url(../images/print.svg);
}
} // Ende ul
} // Ende Items
} // Ende Topmenu
} // Ende Header
/* ###################################################
Slide Effekt
###################################################*/
#egw_fw_topmenu_slide{
width: auto;
text-align: center;
height: 15px;
float: left;
position: fixed;
left: 194px;
}
/*ICON List*/
#egw_fw_topmenu_slide.slidedown{
background-image: url("../images/list.png");
background-position: center center;
height: 15px;
width: 15px;
display: block;
margin-left: 5px;
margin-top: 10px;
background-size: 15px 15px;
float: left;
position: relative;
left: -5px;
cursor: pointer;
}
/*Icon ARROW UP*/
#egw_fw_topmenu_slide.slideup{
background-image: url("../images/slideup.png");
background-position: center center;
height: 15px;
width: 15px;
display: block;
margin-top: -36px;
margin-left: 40px;
cursor: pointer;
}
#slidetoggle{
width: 20px;
height: 20px;
display: block;
}