extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-27 10:23:28 +01:00
Code Issues Packages Projects Releases Wiki Activity
8c03417e37
egroupware_official/pixelegg/less/layout_raster_sidebar.less
nathan 8d58eefc0a Change side menu bullet icons to 16px
2023-02-15 14:58:10 -07:00

675 lines
16 KiB
Plaintext
Raw Blame History

/**
* 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;
// 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(../../api/templates/default/images/reload.png);
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;
padding: 0px 0px 0px 24px;
line-height: 1em;
.fontsize_l;
font-weight: normal;
background-image:url(../../api/templates/default/images/arrow_right.svg);
background-repeat:no-repeat;
background-position:left center;
background-size: 12px;
}
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;
.color_5_gray;
h1,h2 {
background-image:url(../../api/templates/default/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);}
}
}
} // 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
Reference in New Issue View Git Blame Copy Permalink