holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better styling toolbar widget and toolbar in calendar

Browse Source
This commit is contained in:
Hadi Nategh 2016-01-11 19:38:03 +00:00
parent 536c32d8f8
commit 87fca58c0b
5 changed files with 57 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
calendar/templates/default/app.css
View File

@ -1010,27 +1010,17 @@ img.calendar_print_button, img.calendar_print_appicon {
/*weekend slideSwitch in toolbar*/
#calendar-toolbar_toolbar .et2_checkbox_slideSwitch .slideSwitch_container{
width: 65px;
height: 16px;
border-radius: 0;
border: none;
background-color: #FFFFFF;
box-shadow: inset 0 2px 6px rgb(71, 71, 71), 0 1px 0 rgba(255, 255, 255, 0.2);
margin:0;
width: 44px;
}
#calendar-toolbar_toolbar .et2_checkbox_slideSwitch .slideSwitch_container a{
background-color: #515151;
border:none;
div.egw_fw_content_browser_div, #calendar-toolbar_app_header, div.egw_fw_ui_app_header_container {
background-color: #FAFAFA;
}
#calendar-toolbar_toolbar .et2_toolbar_actionlist span.et2_checkbox_slideSwitch {
padding-right: 0;
#calendar-toolbar_app_header {
font-weight: bold;
color: #616161;
}
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch > span.slideSwitch_container > span:first-child {
color: #C0C0C0;
}
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch.switchOn > span.slideSwitch_container > span:first-child{
color: white;
}
#calendar-toolbar_toolbar span.et2_checkbox_slideSwitch.switchOn > span.slideSwitch_container> span:nth-child(2) {
color:#C0C0C0;
#calendar-toolbar_toolbar .et2_toolbar_more {
margin-top: 0;
}

2
etemplate/js/et2_widget_toolbar.js
View File

@ -69,7 +69,7 @@ var et2_toolbar = et2_DOMWidget.extend([et2_IInput],
//actionbox is the div for stored actions
this.actionbox = $j(document.createElement('div'))
.addClass("et2_toolbar_activeList")
.addClass("et2_toolbar_more")
.attr('id',this.id +'-'+ 'actionbox');
//actionlist is div for active actions
this.actionlist = $j(document.createElement('div'))

66
etemplate/templates/default/etemplate2.css
View File

@ -1519,10 +1519,18 @@ div.ms-sel-ctn .ms-sel-item {
margin: 0 !important;
padding: 0 !important;
}
.et2_toolbar .et2_toolbar_actionlist button.et2_button_with_image {
width: 24px;
background-position: center;
background-size: 16px 16px;
border-radius: 3px;
padding-left: 0;
}
.et2_toolbar button {
margin:1px;
margin-right: 3px;
height: 24px;
}
.et2_toolbar button.toolbar_toggled {
background-color: white;
@ -1601,6 +1609,9 @@ div.ms-sel-ctn .ms-sel-item {
.et2_toolbar-dropdown-menulist ul{
position: relative !important;
}
.et2_toolbar div.ui-toolbar-menulist button.et2_button_with_image {
background-size: 16px 16px;
}
div.ui-toolbar-menulist{
position: absolute;
height: inherit !important;
@ -1610,6 +1621,7 @@ div.ui-toolbar-menulist{
padding: 0 !important;
margin-top: 3px !important;
min-width: 150px;
padding-top: 3px;
}
.ui-toolbar-menulist > h {
padding-bottom: 7px;
@ -1637,17 +1649,18 @@ div.ui-toolbar-menulist{
margin-top: 2px;
direction: ltr;
}
.et2_toolbar_activeList{
.et2_toolbar_more{
position: relative;
float:right;
direction: rtl;
padding-bottom: 3px;
}
div.et2_toolbar_activeList .ui-accordion-header-active {
div.et2_toolbar_more .ui-accordion-header-active {
font-weight: normal;
color:black;
}
div.et2_toolbar_activeList h.ui-accordion-header {
padding:4px 14px 6px 25px !important;
div.et2_toolbar_more h.ui-accordion-header {
padding: 4px 14px 3px 25px !important;
margin:1px;
}
.et2_toolbar_actionlist{
@ -1669,17 +1682,18 @@ span.et2_checkbox_slideSwitch {
vertical-align: middle;
}
span.et2_checkbox_slideSwitch > span.slideSwitch_container {
width: 100%;
height: 18px;
border: none;
background-color: #FFFFFF;
box-shadow: inset 0 2px 6px rgb(71, 71, 71), 0 1px 0 rgba(255, 255, 255, 0.2);
margin: 0;
min-width:12px;
height: 12px;
display: block;
position: relative;
background-color: #B4B4B4;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 3px;
padding: 3px;
margin: 1px;
font-size: 12 px;
top: -1px;
}
span.et2_checkbox_slideSwitch > span.slideSwitch_container > span:first-child {
width: 50%;
@ -1691,13 +1705,14 @@ span.et2_checkbox_slideSwitch > span.slideSwitch_container > span:first-child {
left:0;
z-index: 6;
font-weight: bold;
color:#5A5A5A;
color:#C0C0C0;
top:5px;
}
span.et2_checkbox_slideSwitch.switchOn > span.slideSwitch_container > span:first-child {
color:white;
color:#FAFAFA;
}
span.et2_checkbox_slideSwitch.switchOn > span.slideSwitch_container> span:nth-child(2) {
color:#5A5A5A;
color:#C0C0C0;
}
span.et2_checkbox_slideSwitch > span.slideSwitch_container> span:nth-child(2) {
width: 50%;
@ -1709,24 +1724,23 @@ span.et2_checkbox_slideSwitch > span.slideSwitch_container> span:nth-child(2) {
z-index: 6;
left:50%;
font-weight: bold;
color:white;
color:#FAFAFA;
top:5px;
}
span.et2_checkbox_slideSwitch > span.slideSwitch_container a {
position: absolute;
right: 0%;
top: -1px;
right: 0px;
top: 0px;
z-index: 4;
display: block;
width: 48%;
height: 99%;
width: 50%;
height: 95%;
padding-bottom: 0px;
background-color: #0c5da5;
background-color: #7B7B7B;
border-radius: 3px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.15);
}
span.et2_checkbox_slideSwitch > input {
opacity: 0;
@ -1740,22 +1754,22 @@ span.et2_checkbox_slideSwitch.switchOn > span.slideSwitch_container a {
}
/* Slide switch in a toolbar */
.et2_toolbar_actionlist span.et2_checkbox_slideSwitch {
padding-right: 12px;
padding-bottom: 2px;
padding-right: 3px;
padding-left: 1px;
vertical-align: bottom;
}
.et2_toolbar_activeList span.et2_checkbox_slideSwitch {
.et2_toolbar_more span.et2_checkbox_slideSwitch {
text-align: left;
color: black;
font-size: 11px;
font-weight: normal;
width: 100%;
}
.et2_toolbar_activeList span.et2_checkbox_slideSwitch > span.slideSwitch_container {
.et2_toolbar_more span.et2_checkbox_slideSwitch > span.slideSwitch_container {
width: 40px;
float: left;
}
.et2_toolbar_activeList span.et2_checkbox_slideSwitch > input {
.et2_toolbar_more span.et2_checkbox_slideSwitch > input {
display: none;
}

11
pixelegg/css/pixelegg.css
View File

@ -1266,7 +1266,7 @@
margin-top: 2px;
direction: ltr;
}
.et2_toolbar_activeList {
.et2_toolbar_more {
position: relative;
float: right;
direction: rtl;
@ -2175,7 +2175,6 @@ body {
* @package pixelegg
* @version $Id$
*/
@import-once "def_colors.less";
#socialMedia {
position: relative;
bottom: 20px;
@ -4253,7 +4252,7 @@ td.message span.message {
text-decoration: none;
height: 32px;
/*font-size: 1.1em;*/
font-size: 12.100000000000001px;
font-size: 12.1px;
line-height: 1.5em;
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul li a:hover {
@ -4277,7 +4276,7 @@ td.message span.message {
}
#egw_fw_header #egw_fw_topmenu #egw_fw_topmenu_items ul a#topmenu_home:before {
padding-right: 20px;
font-size: 12.100000000000001px;
font-size: 12.1px;
content: " ";
background-image: url(../images/topmenu_items/home.png);
background-repeat: no-repeat;
@ -4673,7 +4672,7 @@ td.message span.message {
padding-left: 3em;
color: #999999;
/*font-size: 12px;*/
font-size: 12.100000000000001px;
font-size: 12.1px;
line-height: 17px;
}
#egw_fw_sidebar #egw_fw_sidemenu .egw_fw_ui_scrollarea_outerdiv .egw_fw_ui_sidemenu_entry_header object {
@ -4845,7 +4844,7 @@ td.message span.message {
margin: 5px 0px 3px 5px;
padding: 0px 0px 0px 15px;
line-height: 1em;
font-size: 12.100000000000001px;
font-size: 12.1px;
background-image: url(../images/arrow_left.png);
background-repeat: no-repeat;
background-position: left center;

2
pixelegg/less/etemplate2.less
View File

@ -1208,7 +1208,7 @@ div.ui-toolbar-menulist{
margin-top: 2px;
direction: ltr;
}
.et2_toolbar_activeList{
.et2_toolbar_more{
position: relative;
float:right;
direction: rtl;