diff --git a/pixelegg/css/pixelegg.css b/pixelegg/css/pixelegg.css index 8041589fd8..af64fc9e78 100644 --- a/pixelegg/css/pixelegg.css +++ b/pixelegg/css/pixelegg.css @@ -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 { diff --git a/pixelegg/images/email.svg b/pixelegg/images/email.svg new file mode 100644 index 0000000000..3cb0585e28 --- /dev/null +++ b/pixelegg/images/email.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + diff --git a/pixelegg/images/url.svg b/pixelegg/images/url.svg new file mode 100644 index 0000000000..c92133ed8d --- /dev/null +++ b/pixelegg/images/url.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/pixelegg/less/etemplate2.less b/pixelegg/less/etemplate2.less index f8383fc35f..1dfde16da6 100755 --- a/pixelegg/less/etemplate2.less +++ b/pixelegg/less/etemplate2.less @@ -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 diff --git a/pixelegg/less/jquery-ui.less b/pixelegg/less/jquery-ui.less index 685af520e1..910143f250 100755 --- a/pixelegg/less/jquery-ui.less +++ b/pixelegg/less/jquery-ui.less @@ -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{ diff --git a/pixelegg/less/layout_chosen.less b/pixelegg/less/layout_chosen.less index b308a31733..c18567f267 100755 --- a/pixelegg/less/layout_chosen.less +++ b/pixelegg/less/layout_chosen.less @@ -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 {} diff --git a/pixelegg/less/layout_content_elements.less b/pixelegg/less/layout_content_elements.less index 2ac5b6904f..a2559871e0 100755 --- a/pixelegg/less/layout_content_elements.less +++ b/pixelegg/less/layout_content_elements.less @@ -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 { diff --git a/pixelegg/mobile/fw_mobile.less b/pixelegg/mobile/fw_mobile.less index 0a105f935a..04db22a494 100644 --- a/pixelegg/mobile/fw_mobile.less +++ b/pixelegg/mobile/fw_mobile.less @@ -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; } } }