extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-27 09:09:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP mobile framework: Adding orientation feature to the framework

Browse Source
This commit is contained in:
Hadi Nategh 2014-11-20 18:10:10 +00:00
parent 9e32d842a2
commit 13ae7b2493
1 changed files with 267 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

501
pixelegg/less/mobile.less
View File

@ -11,23 +11,28 @@ and open the template in the editor.
#egw_fw_basecontainer{ #egw_fw_basecontainer{
//###################
//# #
//# SIDEBAR #
//# #
//###################
#egw_fw_sidebar{
top: 60px;
border-top:2px solid gray;
}//End of Sidebar
//################### //###################
//# # //# #
//# TOOLBAR # //# TOOLBAR #
//# # //# #
//################### //###################
#egw_fw_top_toolbar{
border-bottom:1px sold gray;
div#egw_fw_app_menu{
background-image: url(../images/topmenu_items/mobile/menu.png);
top: 15px;
width: 32px;
height: 32px;
background-size: 32px 32px;
background-repeat: no-repeat;
position:absolute;
right:15px;
padding-bottom: 13px;
border-bottom: 2px solid gray;
}
}
//FW Logout //FW Logout
div#egw_fw_logout{ div#egw_fw_logout{
left: 235px; left: 235px;
@ -66,25 +71,28 @@ and open the template in the editor.
} }
div#egw_fw_topmenu_items{ div#egw_fw_topmenu_items{
width: 250px; width: 250px;
display: inline-block; display: inline;
float: left; float: left;
position: fixed; position: fixed;
left: 20px; left: 55px;
top: 4px; top: 15px;
ul{ ul{
display:flex; display:inline;
padding:0;
margin:0;
list-style-type: none;
li{ li{
display:table-row; display:inline;
padding-right: 6px; padding-right: 6px;
} }
a#topmenu_home:before { a#topmenu_home:before {
content: " "; content: " ";
background-image: url(../images/topmenu_items/mobile/home.png); background-image: url(../images/topmenu_items/mobile/home.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 24px 24px; width: 32px;
width: 24px; height: 32px;
height: 24px; background-size: 32px 32px;
display: inline-block; /*display: inline-block;*/
display:none; display:none;
} }
a#topmenu_prefs:before { a#topmenu_prefs:before {
@ -150,7 +158,18 @@ and open the template in the editor.
} }
}//End of toolbar }//End of toolbar
#egw_fw_portrait_bar{
margin: 7px 5px 0px 285px;
.egw_fw_ui_tabs_header {
height: auto;
.egw_fw_ui_tab_header {
width:auto;
h1{
display:none;
}
}
}
}
// ######################tabs header ########################## // ######################tabs header ##########################
// # # # # # # # # # #### // # # # # # # # # # ####
// # # # # # # # # # #### // # # # # # # # # # ####
@ -210,7 +229,7 @@ and open the template in the editor.
width: 97%; width: 97%;
&:hover { &:hover {
/*.background_color_20_gray ;*/ /*.background_color_20_gray ;*/
background-color: @egw_color_1_e; background-color: none !important;
} }
// APP Name // APP Name
@ -273,270 +292,278 @@ and open the template in the editor.
} }
} }
} }
//###################
//SIDE AREA //# #
#egw_fw_sidemenu { //# SIDEBAR #
position: absolute; //# #
top: 0px; //###################
bottom: 4px; #egw_fw_sidebar{
left: 4px; top: 60px;
right: 5px; border-top:2px solid gray;
overflow: auto;
z-index: 0;
padding-top: 0.6em; //SIDE AREA
font-size: 0.9em; #egw_fw_sidemenu {
position: absolute;
//#################################################### top: 0px;
// All Tabs bottom: 4px;
// DRAG AND DROP left: 4px;
.egw_fw_ui_sidemenu_entry_header right: 5px;
{ overflow-y: auto;
display: block; z-index: 0;
margin: 0 0; padding-top: 0.6em;
/*padding: 0px 5px 5px 10px;*/ font-size: 0.9em;
//####################################################
// All Tabs
.egw_fw_ui_sidemenu_entry_header
{
display: block;
margin: 0 0;
/*padding: 0px 5px 5px 10px;*/
&:hover {
.background_color_15_gray;
.rounded(5px);
}
&:active {.box_shadow_standard_light_inset;}
h1 {
margin: 0 0 10px 0;
padding-top: 0.31em;
padding-left: 3em;
.color_40_gray;
/*font-size: 12px;*/
.fontsize_xl;
line-height: 17px;
}
object {background-color: @gray_0; .dimension_width_height_m;}
&:hover {
.background_color_15_gray;
.rounded(5px);
} }
&:active {.box_shadow_standard_light_inset;}
h1 { // ####################################
margin: 0 0 10px 0; // #### #
padding-top: 0.31em; // ### IMG | ADD NAME #
padding-left: 3em; // ### #
.color_40_gray; // ### #
/*font-size: 12px;*/ // ####################################
.fontsize_xl; // Active APP
line-height: 17px; // Active Tab
// rounded Corner Left Top
.egw_fw_ui_sidemenu_entry_header_active {
//
cursor: pointer;
background-image: url("../images/clear.png");
background-position: 95% -3000px;
background-repeat: no-repeat;
.background_color_10_gray;
.border_radius ( 5px, 0px, 0px, 27px );
.bordered (@gray_30, @gray_30, @gray_30, @gray_30);
margin: 0 0 0 0;
border-bottom: none;
height: 33px;
img {padding-left: 9px; padding-top: 6px; height: 18px;}
h1 {text-transform: uppercase; font-size: 1.4em; .color_100_gray; padding-top: .8em;}
&:hover {.box_shadow_standard_light_hover; .border_radius ( 5px, 0px, 0px, 27px );}
&:active {.box_shadow_standard_light_active; .border_radius ( 5px, 0px, 0px, 27px );}
&:focus {
background-image: url("../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;}
} }
object {background-color: @gray_0; .dimension_width_height_m;} //####################################################
// egw_fw_ui_sidemenu_entry_content
// ########################################
// ## ##
// ## ##
// ########################################
} // ########################################
// ## ##
// ## ##
// ########################################
// ########################################
// ## ##
// ## ##
// ########################################
// ########################################
// #################################### // ## div.egw_fw_ui_category ##
// #### # // ## &:nth-last-of-type(-n+3) ##
// ### IMG | ADD NAME # // #####################################
// ### #
// ### #
// ####################################
// Active APP
// Active Tab
// rounded Corner Left Top
.egw_fw_ui_sidemenu_entry_header_active {
//
cursor: pointer;
background-image: url("../images/clear.png");
background-position: 95% -3000px;
background-repeat: no-repeat;
.background_color_10_gray;
.border_radius ( 5px, 0px, 0px, 27px );
.bordered (@gray_30, @gray_30, @gray_30, @gray_30);
margin: 0 0 0 0;
border-bottom: none;
height: 33px;
img {padding-left: 9px; padding-top: 6px; height: 18px;}
h1 {text-transform: uppercase; font-size: 1.4em; .color_100_gray; padding-top: .8em;}
&:hover {.box_shadow_standard_light_hover; .border_radius ( 5px, 0px, 0px, 27px );}
&:active {.box_shadow_standard_light_active; .border_radius ( 5px, 0px, 0px, 27px );}
&:focus {
background-image: url("../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;}
}
//####################################################
// egw_fw_ui_sidemenu_entry_content
// ########################################
// ## ##
// ## ##
// ########################################
// ########################################
// ## ##
// ## ##
// ########################################
// ########################################
// ## ##
// ## ##
// ########################################
// ########################################
// ## div.egw_fw_ui_category ##
// ## &:nth-last-of-type(-n+3) ##
// #####################################
.egw_fw_ui_sidemenu_entry_content { .egw_fw_ui_sidemenu_entry_content {
display: block; display: block;
background-image: none; background-image: none;
.border_radius (0, 0, 27px, 0); .border_radius (0, 0, 27px, 0);
border-color: @gray_30; border-color: @gray_30;
border-style: solid; border-style: solid;
border-width: 0px; border-width: 0px;
margin: 0 0 2em 0; margin: 0 0 2em 0;
// rounded Corner on bottom // rounded Corner on bottom
&:nth-last-of-type(-n+3) { &:nth-last-of-type(-n+3) {
padding: 5px 0.3em 1.5em 0.3em; padding: 5px 0.3em 1.5em 0.3em;
margin: 0 0 10px 0; margin: 0 0 10px 0;
.background_color_30_gray; .background_color_30_gray;
.border_radius (0, 0, 24px, 0); .border_radius (0, 0, 24px, 0);
border-color: @gray_30; border-color: @gray_30;
} }
& > div {.background_color_30_gray;} & > div {.background_color_30_gray;}
//################################################### //###################################################
// has round corners // has round corners
div.egw_fw_ui_category:nth-last-of-type(-n+3) { div.egw_fw_ui_category:nth-last-of-type(-n+3) {
.border_radius (0, 0, 15px, 0); .border_radius (0, 0, 15px, 0);
} }
//################################################### //###################################################
// Normal // Normal
.egw_fw_ui_category { .egw_fw_ui_category {
margin: 4px 5px 5px 5px; margin: 4px 5px 5px 5px;
padding: 0.5em 1em 0.5em 0; padding: 0.5em 1em 0.5em 0;
cursor: pointer; cursor: pointer;
// border-top: 7px solid; // border-top: 7px solid;
border-color: @gray_30; border-color: @gray_30;
background-color: @gray_10; background-color: @gray_10;
/*background-color: @egw_color_2_d;*/ /*background-color: @egw_color_2_d;*/
.border_radius(3px,3px,3px,3px); .border_radius(3px,3px,3px,3px);
h1 { h1 {
margin: 5px 0px 3px 5px; margin: 5px 0px 3px 5px;
padding: 0px 0px 0px 15px; padding: 0px 0px 0px 15px;
line-height: 1em; line-height: 1em;
.fontsize_l; .fontsize_l;
background-image:url(../images/arrow_left.png); background-image:url(../images/arrow_left.png);
background-repeat:no-repeat; background-repeat:no-repeat;
background-position:left center; background-position:left center;
} }
div.egw_fw_ui_category:nth-last-of-type(-n+3) { div.egw_fw_ui_category:nth-last-of-type(-n+3) {
img.egw_fw_ui_sidemenu_listitem_icon { img.egw_fw_ui_sidemenu_listitem_icon {
display: block; display: block;
} }
} }
} }
//################################# //#################################
// Hover // Hover
// on Mouse over change color // on Mouse over change color
.egw_fw_ui_category:hover { .egw_fw_ui_category:hover {
.background_color_40_gray; .background_color_40_gray;
padding: 0.5em 1em 0.5em 0; padding: 0.5em 1em 0.5em 0;
} }
/*######################*/ /*######################*/
// Active State // Active State
// change Background color in Blue // change Background color in Blue
// See all Elements // See all Elements
.egw_fw_ui_category_active { .egw_fw_ui_category_active {
border-bottom-width: 0px; border-bottom-width: 0px;
margin-top: 4px; margin-top: 4px;
background-color: @egw_color_2_a; background-color: @egw_color_2_a;
/*.background-color-50-gray;*/ /*.background-color-50-gray;*/
.color_5_gray; .color_5_gray;
.border_radius(3px,3px,3px,3px) !important; .border_radius(3px,3px,3px,3px) !important;
h1 { h1 {
background-image:url(../images/arrow_down.png); background-image:url(../images/arrow_down.png);
line-height: 1em; line-height: 1em;
font-size: 12px; font-size: 12px;
a { a {
color: #FFF; color: #FFF;
img {.dimension_width_height_s;} img {.dimension_width_height_s;}
&:hover { &:hover {
padding: 5px 30px 5px 0px; padding: 5px 30px 5px 0px;
width: 200px; width: 200px;
.background_color_10_gray; .background_color_10_gray;
.color_50_gray; .color_50_gray;
.Complete_Button_hover; .Complete_Button_hover;
} }
} }
} }
&:hover {background-color: @egw_color_2_d; .transition (0.2s, ease-out);} &:hover {background-color: @egw_color_2_d; .transition (0.2s, ease-out);}
} }
} }
.egw_fw_ui_sidemenu_entry_content_bottom { .egw_fw_ui_sidemenu_entry_content_bottom {
border-width: 0px 1px 1px 1px; border-width: 0px 1px 1px 1px;
} }
.egw_fw_ui_sidemenu_entry_header_bottom { .egw_fw_ui_sidemenu_entry_header_bottom {
border-width: 0px; border-width: 0px;
border-color: @gray_0; border-color: @gray_0;
} }
.egw_fw_ui_sidemenu_entry_icon { .egw_fw_ui_sidemenu_entry_icon {
display: inline-block; display: inline-block;
.dimension_height_m; .dimension_height_m;
padding-left: 0; padding-left: 0;
padding-right: 0px; padding-right: 0px;
float: left; float: left;
/*filter grey*/ /*filter grey*/
.img_filter_gray; .img_filter_gray;
} }
} // SIDEMENU End } // SIDEMENU End
}//End of Sidebar
//ToggleClass //ToggleClass
.sidebarToggle{ .sidebar-toggle{
#egw_fw_sidebar{ #egw_fw_sidebar{
#egw_fw_sidemenu{ #egw_fw_sidemenu{
width:82px !important; width:82px !important;
@ -578,5 +605,11 @@ and open the template in the editor.
} }
} }
.portrait-app-toggle{
#egw_fw_portrait_bar{
display:none !important;
}
}
} }