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

Set svg icons for selectboxes

Browse Source
This commit is contained in:
Hadi Nategh 2020-03-12 13:37:53 +01:00
parent 35866f509b
commit 25455ba8a5
8 changed files with 102 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
pixelegg/css/pixelegg.css
View File

@ -125,13 +125,13 @@
margin-left: -10px;
}
a.et2_url.email {
background-image: url(../images/email.png);
background-image: url(../images/email.svg);
}
a.et2_url.phone {
background-image: url(../images/phone.svg);
}
a.et2_url.url {
background-image: url(../images/url.png);
background-image: url(../images/url.svg);
}
/**
* Button widget - text only, and icon
@ -350,7 +350,7 @@
left: 0px;
}
.et2_link_to .et2_link_entry .ui-icon-triangle-1-s {
background: #ffffff url(../images/selectarrowdown.png) no-repeat center right;
background: #ffffff url(../images/arrow_down.svg) no-repeat center right;
}
.et2_link_to .et2_file span {
background-position: center;
@ -361,7 +361,7 @@
border-radius: 3px;
}
.et2_link_entry .ui-icon-triangle-1-s {
background: #ffffff url(../images/selectarrowdown.png) no-repeat center right;
background: #ffffff url(../images/arrow_down.svg) no-repeat center right;
background-size: contain;
}
.et2_link {
@ -846,13 +846,13 @@
}
.nextmatch_sortheader.asc {
font-weight: bold;
background-image: url(../images/selectarrowup.png);
background-size: 16px 16px;
background-image: url(../images/arrow_up.svg);
background-size: 8px 8px;
}
.nextmatch_sortheader.desc {
font-weight: bold;
background-image: url(../images/selectarrowdown.png);
background-size: 16px 16px;
background-image: url(../images/arrow_down.svg);
background-size: 8px 8px;
}
/**
* Grid / nextmatch Hierarchy
@ -1151,6 +1151,12 @@ option:checked {
color: #999999;
text-decoration: none;
}
.ui-state-default .ui-icon.ui-icon-triangle-1-s {
background: url("../images/arrow_down.svg");
background-size: 8px auto;
background-position: center;
background-repeat: no-repeat;
}
.ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-widget-content .ui-state-focus {
@ -2580,6 +2586,18 @@ button[id="add"] {
}
/* @end */
/* @group Single Chosen */
.chzn-container-single .chzn-single div b {
background: url("../images/arrow_down.svg");
background-size: 8px auto;
background-position: center;
background-repeat: no-repeat;
}
.chzn-container-single.chzn-with-drop .chzn-single div b {
background: url("../images/arrow_up.svg");
background-size: 8px auto;
background-position: center;
background-repeat: no-repeat;
}
/* @end */
/* @group Results */
.chzn-container .chzn-results {
@ -2800,8 +2818,14 @@ select {
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
background: #ffffff url(../images/selectarrowdown.png) no-repeat center right;
background-size: 16px auto;
background: #ffffff url(../images/arrow_down.svg) no-repeat center right;
background-size: 8px auto;
background-position-x: calc(100% - 8px);
}
select:active {
background: #ffffff url(../images/arrow_up.svg) no-repeat center right;
background-size: 8px auto;
background-position-x: calc(100% - 8px);
}
/*IE has no appearance but we can remove arrows by ms-expand*/
select::-ms-expand {

16
pixelegg/images/email.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<g>
<path fill="#62686A" d="M30.656,8.738c-0.016-1.043-0.875-1.882-1.939-1.883L3.45,6.838c-1.073,0-1.947,0.854-1.946,1.91v0.073
l14.529,9.437L30.656,8.738z"/>
<polygon fill="#62686A" points="21.703,18.141 30.659,24.466 30.659,22.354 30.66,22.354 30.66,17.658 30.66,12.962 30.659,12.962
30.659,12.328 "/>
<path fill="#62686A" d="M3.45,28.479l25.267-0.018c0.641-0.001,1.203-0.309,1.557-0.778l-11.31-7.89l-2.929,1.842l-2.938-1.843
L1.833,27.63C2.182,28.142,2.776,28.479,3.45,28.479z"/>
<polygon fill="#62686A" points="1.504,24.376 10.367,18.133 1.504,12.375 1.504,12.982 1.503,12.982 1.503,17.658 1.503,22.334
1.504,22.334 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

16
pixelegg/images/url.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<path fill="#696969" d="M11.719,25.389L10.1,26.997c-1.404,1.391-3.687,1.393-5.089,0c-0.675-0.67-1.045-1.559-1.045-2.504
c0-0.944,0.371-1.834,1.045-2.502l5.96-5.914c1.235-1.225,3.559-3.028,5.252-1.349c0.777,0.771,2.033,0.767,2.803-0.01
c0.772-0.777,0.768-2.032-0.01-2.804c-2.878-2.857-7.134-2.329-10.839,1.347l-5.96,5.915C0.788,20.596,0,22.484,0,24.493
c0,2.01,0.788,3.897,2.218,5.317C3.689,31.271,5.622,32,7.555,32c1.934,0,3.867-0.729,5.339-2.19l1.621-1.608
c0.777-0.771,0.781-2.026,0.009-2.804C13.753,24.62,12.497,24.617,11.719,25.389z M29.781,2.417
c-3.092-3.068-7.415-3.234-10.276-0.394l-2.02,2.003c-0.776,0.771-0.782,2.027-0.01,2.803c0.772,0.777,2.026,0.781,2.805,0.01
l2.017-2.002c1.483-1.472,3.425-0.862,4.692,0.394c0.674,0.67,1.044,1.559,1.044,2.503c0,0.945-0.37,1.835-1.044,2.503l-6.359,6.308
c-2.906,2.885-4.271,1.531-4.853,0.953c-0.777-0.771-2.032-0.767-2.804,0.01c-0.771,0.778-0.767,2.034,0.01,2.805
c1.334,1.325,2.859,1.981,4.456,1.981c1.955,0,4.021-0.985,5.985-2.936l6.358-6.308C31.212,11.633,32,9.744,32,7.735
S31.212,3.838,29.781,2.417z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

16
pixelegg/less/etemplate2.less
View File

@ -103,13 +103,13 @@ a.et2_url {
margin-left: -10px;
}
a.et2_url.email {
background-image: url(../images/email.png);
background-image: url(../images/email.svg);
}
a.et2_url.phone {
background-image: url(../images/phone.svg);
}
a.et2_url.url {
background-image: url(../images/url.png);
background-image: url(../images/url.svg);
}
@ -293,7 +293,7 @@ div.et2_file input.et2_file_upload{
left: 0px;
}
.ui-icon-triangle-1-s {
background: #ffffff url(../images/selectarrowdown.png) no-repeat center right;
background: #ffffff url(../images/arrow_down.svg) no-repeat center right;
}
}
// BUTTON: make link button
@ -317,7 +317,7 @@ div.et2_file input.et2_file_upload{
.et2_link_entry {
.ui-icon-triangle-1-s {
background: #ffffff url(../images/selectarrowdown.png) no-repeat center right;
background: #ffffff url(../images/arrow_down.svg) no-repeat center right;
background-size: contain;
}
}
@ -808,14 +808,14 @@ div.header_row_right{
.nextmatch_sortheader.asc {
font-weight: bold;
background-image: url(../images/selectarrowup.png);
background-size: 16px 16px;
background-image: url(../images/arrow_up.svg);
background-size: 8px 8px;
}
.nextmatch_sortheader.desc {
font-weight: bold;
background-image: url(../images/selectarrowdown.png);
background-size: 16px 16px;
background-image: url(../images/arrow_down.svg);
background-size: 8px 8px;
}
/**
* Grid / nextmatch Hierarchy

7
pixelegg/less/jquery-ui.less
View File

@ -101,7 +101,12 @@ option:checked {background-color: @color_hover_row;}
.color_40_gray;
text-decoration: none;
}
.ui-state-default .ui-icon.ui-icon-triangle-1-s {
background: url("../images/arrow_down.svg");
background-size: 8px auto;
background-position: center;
background-repeat: no-repeat;
}
.ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-widget-content .ui-state-focus{

13
pixelegg/less/layout_chosen.less
View File

@ -39,7 +39,18 @@
.chzn-container-single .chzn-single abbr:hover {}
.chzn-container-single.chzn-disabled .chzn-single abbr:hover {}
.chzn-container-single .chzn-single div {}
.chzn-container-single .chzn-single div b {}
.chzn-container-single .chzn-single div b {
background: url("../images/arrow_down.svg");
background-size: 8px auto;
background-position: center;
background-repeat: no-repeat;
}
.chzn-container-single.chzn-with-drop .chzn-single div b {
background: url("../images/arrow_up.svg");
background-size: 8px auto;
background-position: center;
background-repeat: no-repeat;
}
.chzn-container-single .chzn-search {}
.chzn-container-single .chzn-search input {}
.chzn-container-single .chzn-drop {}

10
pixelegg/less/layout_content_elements.less
View File

@ -101,8 +101,14 @@ select {
-webkit-appearance:none;
-moz-appearance: none;
margin:0;
background: #ffffff url(../images/selectarrowdown.png) no-repeat center right;
background-size: 16px auto;
background: #ffffff url(../images/arrow_down.svg) no-repeat center right;
background-size: 8px auto;
background-position-x: ~"calc(100% - 8px)";
}
select:active {
background: #ffffff url(../images/arrow_up.svg) no-repeat center right;
background-size: 8px auto;
background-position-x: ~"calc(100% - 8px)";
}
/*IE has no appearance but we can remove arrows by ms-expand*/
select::-ms-expand {

4
pixelegg/mobile/fw_mobile.less
View File

@ -725,8 +725,8 @@
div {
width: 40px;
b {
background: white url(../images/selectarrowdown.png) no-repeat center !important;
background-size: 32px !important;
background: white url(../images/arrow_down.svg) no-repeat center !important;
background-size: 16px !important;
}
}
}