extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-06-24 11:51:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

WIP toggle sidebar menu:

Browse Source 
- Fix toggle button style
This commit is contained in:
Hadi Nategh 2015-09-09 12:56:33 +00:00
parent b24dc04138
commit 2d0a6859b3
3 changed files with 27 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
pixelegg/css/mobile.css
View File

@ -2196,7 +2196,6 @@ body {
* @package pixelegg * @package pixelegg
* @version $Id$ * @version $Id$
*/ */
@import-once "def_colors.less";
#socialMedia { #socialMedia {
position: relative; position: relative;
bottom: 20px; bottom: 20px;
@ -4990,19 +4989,6 @@ td.message span.message {
float: right; float: right;
margin-right: 5px; margin-right: 5px;
} }
#egw_fw_sidebar #egw_fw_toggler:hover span {
background-color: #b4b4b4;
}
#egw_fw_sidebar #egw_fw_toggler:hover span:before {
transition-duration: 0.7s;
transform: rotate(156deg) translate(7px, 1px);
background-color: #b4b4b4;
}
#egw_fw_sidebar #egw_fw_toggler:hover span:after {
transition-duration: 0.7s;
transform: rotate(-150deg) translate(10px, -1px);
background-color: #b4b4b4;
}
#egw_fw_sidebar #egw_fw_toggler span { #egw_fw_sidebar #egw_fw_toggler span {
background-color: transparent; background-color: transparent;
position: relative; position: relative;
@ -5014,8 +5000,9 @@ td.message span.message {
top: 11px; top: 11px;
} }
#egw_fw_sidebar #egw_fw_toggler span:before { #egw_fw_sidebar #egw_fw_toggler span:before {
transition-duration: 1s; transition-duration: 0.7s;
transform: rotate(45deg) translate(5px, 5px); transform: rotate(145deg) translate(8px, -2px);
background-color: #b4b4b4;
} }
#egw_fw_sidebar #egw_fw_toggler span:before, #egw_fw_sidebar #egw_fw_toggler span:before,
#egw_fw_sidebar #egw_fw_toggler span:after { #egw_fw_sidebar #egw_fw_toggler span:after {
@ -5023,8 +5010,8 @@ td.message span.message {
position: absolute; position: absolute;
left: 0; left: 0;
top: -9px; top: -9px;
width: 100%; width: 12px;
height: 5px; height: 3px;
background-color: #b3b3b3; background-color: #b3b3b3;
backface-visibility: hidden; backface-visibility: hidden;
border-radius: 2px; border-radius: 2px;
@ -5032,7 +5019,8 @@ td.message span.message {
#egw_fw_sidebar #egw_fw_toggler span:after { #egw_fw_sidebar #egw_fw_toggler span:after {
top: 9px; top: 9px;
transition-duration: 0.7s; transition-duration: 0.7s;
transform: rotate(-45deg) translate(7px, -8px); transform: rotate(-145deg) translate(8px, 2px);
background-color: #b4b4b4;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn { #egw_fw_sidebar .egw_fw_sidebar_toggleOn {
/* toggler button*/ /* toggler button*/
@ -5049,6 +5037,8 @@ td.message span.message {
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span:before, #egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span:before,
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span:after { #egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span:after {
transform: none; transform: none;
width: 100%;
height: 5px;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span { #egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span {
background-color: #b4b4b4; background-color: #b4b4b4;

28
pixelegg/css/pixelegg.css
View File

@ -2185,7 +2185,6 @@ body {
* @package pixelegg * @package pixelegg
* @version $Id$ * @version $Id$
*/ */
@import-once "def_colors.less";
#socialMedia { #socialMedia {
position: relative; position: relative;
bottom: 20px; bottom: 20px;
@ -4979,19 +4978,6 @@ td.message span.message {
float: right; float: right;
margin-right: 5px; margin-right: 5px;
} }
#egw_fw_sidebar #egw_fw_toggler:hover span {
background-color: #b4b4b4;
}
#egw_fw_sidebar #egw_fw_toggler:hover span:before {
transition-duration: 0.7s;
transform: rotate(156deg) translate(7px, 1px);
background-color: #b4b4b4;
}
#egw_fw_sidebar #egw_fw_toggler:hover span:after {
transition-duration: 0.7s;
transform: rotate(-150deg) translate(10px, -1px);
background-color: #b4b4b4;
}
#egw_fw_sidebar #egw_fw_toggler span { #egw_fw_sidebar #egw_fw_toggler span {
background-color: transparent; background-color: transparent;
position: relative; position: relative;
@ -5003,8 +4989,9 @@ td.message span.message {
top: 11px; top: 11px;
} }
#egw_fw_sidebar #egw_fw_toggler span:before { #egw_fw_sidebar #egw_fw_toggler span:before {
transition-duration: 1s; transition-duration: 0.7s;
transform: rotate(45deg) translate(5px, 5px); transform: rotate(145deg) translate(8px, -2px);
background-color: #b4b4b4;
} }
#egw_fw_sidebar #egw_fw_toggler span:before, #egw_fw_sidebar #egw_fw_toggler span:before,
#egw_fw_sidebar #egw_fw_toggler span:after { #egw_fw_sidebar #egw_fw_toggler span:after {
@ -5012,8 +4999,8 @@ td.message span.message {
position: absolute; position: absolute;
left: 0; left: 0;
top: -9px; top: -9px;
width: 100%; width: 12px;
height: 5px; height: 3px;
background-color: #b3b3b3; background-color: #b3b3b3;
backface-visibility: hidden; backface-visibility: hidden;
border-radius: 2px; border-radius: 2px;
@ -5021,7 +5008,8 @@ td.message span.message {
#egw_fw_sidebar #egw_fw_toggler span:after { #egw_fw_sidebar #egw_fw_toggler span:after {
top: 9px; top: 9px;
transition-duration: 0.7s; transition-duration: 0.7s;
transform: rotate(-45deg) translate(7px, -8px); transform: rotate(-145deg) translate(8px, 2px);
background-color: #b4b4b4;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn { #egw_fw_sidebar .egw_fw_sidebar_toggleOn {
/* toggler button*/ /* toggler button*/
@ -5038,6 +5026,8 @@ td.message span.message {
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span:before, #egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span:before,
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span:after { #egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler span:after {
transform: none; transform: none;
width: 100%;
height: 5px;
} }
#egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span { #egw_fw_sidebar .egw_fw_sidebar_toggleOn #egw_fw_toggler:hover span {
background-color: #b4b4b4; background-color: #b4b4b4;

29
pixelegg/less/layout_raster_sidebar.less
View File

@ -339,34 +339,20 @@
float: right; float: right;
margin-right:5px; margin-right:5px;
&:hover {
span {
background-color: #b4b4b4;
&:before {
transition-duration: 0.7s;
transform: rotate(156deg) translate(7px, 1px);
background-color: #b4b4b4;
}
&:after {
transition-duration: 0.7s;
transform: rotate(-150deg) translate(10px, -1px);
background-color: #b4b4b4;
}
}
}
span { span {
background-color: transparent; background-color: transparent;
&:before{ &:before{
transition-duration: 1s; transition-duration: 0.7s;
transform: rotate(45deg) translate(5px, 5px); transform: rotate(145deg) translate(8px, -2px);
background-color: #b4b4b4;
} }
&:before, &:after { &:before, &:after {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
top: -9px; top: -9px;
width: 100%; width:12px;
height: 5px; height: 3px;
background-color: #b3b3b3; background-color: #b3b3b3;
backface-visibility: hidden; backface-visibility: hidden;
border-radius: 2px; border-radius: 2px;
@ -374,7 +360,8 @@
&:after { &:after {
top:9px; top:9px;
transition-duration: 0.7s; transition-duration: 0.7s;
transform: rotate(-45deg) translate(7px, -8px); transform: rotate(-145deg) translate(8px, 2px);
background-color: #b4b4b4;
} }
position: relative; position: relative;
display: block; display: block;
@ -395,6 +382,8 @@
transition: all 0.3s; transition: all 0.3s;
&:before, &:after { &:before, &:after {
transform:none; transform:none;
width:100%;
height:5px;
} }
} }
&:hover { &:hover {