From 42606873af91661de564ebe645dfd3a0dabc8398 Mon Sep 17 00:00:00 2001 From: Pierre Goiffon Date: Thu, 12 Apr 2018 08:52:33 +0000 Subject: [PATCH] Advanced search improvements (restore 2018-04-10 revisions : r5629..r5631) * Add support for default search criteria * replace friendlyname by the class name for consistency * WIP Client SVN:trunk[5629] --- core/metamodel.class.php | 1 + css/light-grey.css | 2705 +++++++++++++++++ css/light-grey.scss | 56 +- .../datamodel.itop-config-mgmt.xml | 13 + dictionaries/en.dictionary.itop.ui.php | 7 +- dictionaries/fr.dictionary.itop.ui.php | 7 +- js/search/search_form_criteria.js | 8 +- js/search/search_form_criteria_enum.js | 6 + js/search/search_form_handler.js | 13 +- setup/compiler.class.inc.php | 1 + .../criteriontooql.class.inc.php | 9 +- .../search/searchform.class.inc.php | 73 +- 12 files changed, 2866 insertions(+), 33 deletions(-) create mode 100644 css/light-grey.css diff --git a/core/metamodel.class.php b/core/metamodel.class.php index aa678bad2..86c44ea6c 100644 --- a/core/metamodel.class.php +++ b/core/metamodel.class.php @@ -7012,3 +7012,4 @@ MetaModel::RegisterZList("preview", array("description" => "All attributes visib MetaModel::RegisterZList("standard_search", array("description" => "List of criteria for the standard search", "type" => "filters")); MetaModel::RegisterZList("advanced_search", array("description" => "List of criteria for the advanced search", "type" => "filters")); +MetaModel::RegisterZList("default_search", array("description" => "List of criteria displayed by default during search", "type" => "filters")); diff --git a/css/light-grey.css b/css/light-grey.css new file mode 100644 index 000000000..07ed9cf26 --- /dev/null +++ b/css/light-grey.css @@ -0,0 +1,2705 @@ +/* CSS Document */ +body { + font-family: Tahoma, Verdana, Arial, Helvetica; + font-size: 10pt; + color: #000; + margin: 0; + /* Remove body margin/padding */ + padding: 0; + overflow: hidden; + /* Remove scroll bars on browser window */ +} +body.printable-version { + margin: 1.5em; + overflow: auto; +} +/* to prevent flicker, hide the pane's content until it's ready */ +.ui-layout-center, .ui-layout-north, .ui-layout-south { + display: none; +} +.ui-layout-content { + padding-left: 10px; +} +.ui-layout-content .ui-tabs-nav li { + /* Overriding jQuery UI theme to see active tab better */ + margin-bottom: 2px; +} +.ui-layout-content .ui-tabs-nav li.ui-tabs-active { + padding-bottom: 3px; +} +.raw_output { + font-family: Courier-New, Courier, Arial, Helvetica; + font-size: 8pt; + background-color: #eee; + color: #000; + border: 1px dashed #000; + padding: 0.25em; + margin-top: 1em; +} +h1 { + font-family: Tahoma, Verdana, Arial, Helvetica; + color: #000; + font-weight: bold; + font-size: 12pt; +} +h2 { + font-family: Tahoma, Verdana, Arial, Helvetica; + color: #000; + font-weight: normal; + font-size: 12pt; +} +h3 { + font-family: Tahoma, Verdana, Arial, Helvetica; + color: #000; + font-weight: normal; + font-size: 10pt; +} +label { + cursor: pointer; +} +.hilite, .hilite a, .hilite a:visited { + color: #ea7d1e; + text-decoration: none; +} +table.datatable { + width: 100%; + border: 0; + padding: 0; +} +td.menucontainer { + text-align: right; +} +table.listResults { + padding: 0px; + border-top: 3px solid #f1f1f1; + border-left: 3px solid #f1f1f1; + border-bottom: 3px solid #e6e6e1; + border-right: 3px solid #e6e6e1; + width: 100%; + background-color: #fff; +} +table.listResults td { + padding: 2px; +} +table.listResults td .view-image { + width: inherit !important; + height: inherit !important; +} +table.listResults td .view-image img { + max-width: 48px !important; + max-height: 48px !important; + display: block; + margin-left: auto; + margin-right: auto; +} +.edit-image .view-image { + display: inline-block; +} +.edit-image .view-image img[src=""], .edit-image .view-image img[src="null"] { + visibility: hidden; +} +.edit-image .view-image.dirty.compat { + background-image: url("ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png"); +} +.edit-image .view-image.dirty.compat img { + opacity: 0.3; +} +.edit-image .edit-buttons { + display: inline-block; + vertical-align: top; + margin-top: 4px; + margin-left: 3px; +} +.edit-image .edit-buttons .button { + cursor: pointer; + margin-bottom: 3px; + padding: 2px; + background-color: #ea7d1e; +} +.edit-image .edit-buttons .button.disabled { + cursor: default; + background-color: #555; + opacity: 0.3; +} +.edit-image .edit-buttons .button .ui-icon { + background-image: url("ui-lightness/images/ui-icons_ffffff_256x240.png"); +} +.edit-image .file-input { + display: block; +} +/* Center the image both horizontally and vertically, withing a box which size is fixed (depends on the attribute definition) */ +.details .view-image { + text-align: center; + padding: 2px; + border: 2px solid #ddd; + border-radius: 6px; +} +.details .view-image img { + display: inline-block; + vertical-align: middle; + max-width: 90% !important; + max-height: 90% !important; +} +.details .view-image .helper-middle { + display: inline-block; + height: 100%; + vertical-align: middle; +} +table.listContainer { + border: 0; + padding: 0; + margin: 0; + width: 100%; + clear: both; +} +tr.containerHeader, tr.containerHeader td { + background: transparent; +} +tr.even td, .wizContainer tr.even td { + background-color: #f1f1f1; +} +tr.red_even td, .wizContainer tr.red_even td { + background-color: #f97e75; + color: #fff; +} +tr.red td, .wizContainer tr.red td { + background-color: #f9a397; + color: #fff; +} +tr.orange_even td, .wizContainer tr.orange_even td { + background-color: #f4d07a; +} +tr.orange td, .wizContainer tr.orange td { + background-color: #f4e96c; +} +tr.green_even td, .wizContainer tr.green_even td { + background-color: #bee5a3; +} +tr.green td, .wizContainer tr.green td { + background-color: #b3e5b4; +} +tr td.hover, tr.even td.hover, .hover a, .hover a:visited, .hover a:hover, .wizContainer tr.even td.hover, .wizContainer tr td.hover { + background-color: #fdf5d0; + color: #000; +} +th { + font-family: Tahoma, Verdana, Arial, Helvetica; + font-size: 8pt; + color: #1c94c4; + height: 20px; + background: #f1f1f1 bottom repeat-x; +} +th.header { + cursor: pointer; + background-repeat: no-repeat; + background-position: center right; + background-repeat: no-repeat; + padding-right: 16px; +} +th.headerSortUp { + background-image: url(../images/asc.gif); + text-decoration: underline; + cursor: pointer; +} +th.headerSortDown { + background-image: url(../images/desc.gif); + text-decoration: underline; + cursor: pointer; +} +td { + font-family: Tahoma, Verdana, Arial, Helvetica; + font-size: 12px; + color: #696969; + nobackground-color: #fff; + padding: 0px; +} +tr.clicked td { + font-family: Tahoma, Verdana, Arial, Helvetica; + font-size: smaller; + background-color: #ffcfe8; +} +td.label { + vertical-align: top; +} +td.label span { + font-family: Tahoma, Verdana, Arial, Helvetica; + font-size: 12px; + color: #000; + padding: 5px; + padding-right: 10px; + font-weight: bold; + vertical-align: top; + text-align: right; + display: block; +} +fieldset td.label span { + padding: 3px; + padding-right: 10px; +} +fieldset { + margin-top: 3px; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + border-radius: 6px; + border-style: solid; + border-color: #ddd; +} +legend { + font-family: Tahoma, Verdana, Arial, Helvetica; + font-size: 12px; + padding: 8px; + color: #fff; + background-color: #1c94c4; + font-weight: bold; + -moz-border-radius: 6px; + -webkit-border-radius: 6px; + border-radius: 6px; +} +legend.transparent { + background: transparent; + color: #333; + font-size: 1em; + font-weight: normal; + padding: 0; +} +.ui-widget-content td legend a, .ui-widget-content td legend a:hover, .ui-widget-content td legend a:visited { + color: #fff; +} +.ui-widget-content td a, p a, p a:visited, td a, td a:visited { + text-decoration: none; + color: #1c94c4; +} +.ui-widget-content td a.cke_button, .ui-widget-content td a.cke_toolbox_collapser, .ui-widget-content td a.cke_combo_button, cke_dialog a { + padding-left: 0; + background-image: none; +} +.ui-widget-content td a:hover, p a:hover, td a:hover { + text-decoration: underline; + color: #ea7d1e; +} +.cke_reset_all *:hover { + text-decoration: none; + color: #000; +} +table.cke_dialog_contents a.cke_dialog_ui_button_ok { + color: #000; + border-color: #ea7d1e; + background: #ea7d1e; +} +.cke_notifications_area { + display: none; +} +td a.no-arrow, td a.no-arrow:visited, .SearchDrawer a.no-arrow, .SearchDrawer a.no-arrow:visited { + text-decoration: none; + color: #000; + padding-left: 0px; + background: inherit; +} +td a.no-arrow:hover { + text-decoration: underline; + color: #d81515; + padding-left: 0px; + background: inherit; +} +td a.mailto, td a.mailto:visited { + text-decoration: none; + color: #000; + padding-left: 20px; + background: url(../images/mail.png?v=v2.5.0) no-repeat left; +} +td a.mailto:hover { + text-decoration: underline; + color: #ea7d1e; + padding-left: 20px; + background: url(../images/mail.png?v=v2.5.0) no-repeat left; +} +a.small_action { + font-family: Tahoma, Verdana, Arial, Helvetica; + font-size: 8pt; + color: #000; + text-decoration: none; +} +.display_block { + padding: 0.25em; +} +.actions_details { + float: right; + margin-top: 10px; + margin-right: 10px; + padding-left: 5px; + padding-top: 2px; + padding-bottom: 2px; + background: #ea7d1e url(../images/actions_left.png?v=v2.5.0) no-repeat left; +} +.actions_details span { + background: url(../images/actions_right.png?v=v2.5.0) no-repeat right; + color: #fff; + font-weight: bold; + padding-top: 2px; + padding-bottom: 2px; + padding-right: 12px; +} +.actions_details a { + text-decoration: none; +} +.loading { + noborder: 1px dashed #ccc; + background: #b9c1c8; + padding: 0.25em; +} +input.textSearch { + border: 1px solid #000; + font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; + font-size: 12px; + color: #000; +} +.ac_input { + border: 1px solid #7f9db9; + background: #fff url(../images/ac-background.gif) no-repeat right; +} +/* By Rom */ +.csvimport_createobj { + color: #a00; + background-color: #eee; +} +.csvimport_error { + font-weight: bold; + color: #f00; + background-color: #eee; +} +.csvimport_warning { + color: #c88; + background-color: #eee; +} +.csvimport_ok { + color: #000 0; + background-color: #bfb; +} +.csvimport_reconkey { + font-style: italic; + color: #888; + background-color: #fff FF; +} +.csvimport_extreconkey { + color: #888; + background-color: #fff; +} +#accordion { + display: none; +} +#accordion h3 { + padding: 10px; +} +.ui-accordion-content ul { + list-style: none; + list-style-image: url(data:0); + padding-left: 16px; + margin-top: 8px; +} +.ui-accordion-content li.submenu { + margin-top: 8px; +} +.ui-accordion-content ul ul { + padding: 8px 0px 8px 8px; + margin: 0; + list-style: none; + list-style-image: url(data:0); + border: 0; +} +.nothing { + noborder-top: 1px solid #8b8b8b; + padding: 4px 0px 0px 16px; + font-size: 8pt; + background: url(../images/green-square.gif) no-repeat bottom left; + color: #83b217; + font-weight: bold; + text-decoration: none; +} +div.ui-accordion-content { + padding-top: 10px; + padding-left: 10px; +} +.ui-accordion-content a, ui-accordion-content a:visited { + color: #1c94c4; + text-decoration: none; +} +.ui-accordion-content a:hover { + color: #ea7d1e; + text-decoration: none; +} +.ui-accordion-content ul { + padding-left: 0; + margin-top: 0; +} +.ui-accordion-content li { + color: #555; + text-decoration: none; + margin: 0; + padding: 0px 0pt 0px 16px; + font-size: 9pt; + background: url(../images/mini-arrow-orange.gif) no-repeat top left; + font-weight: normal; + border: 0; +} +a.CollapsibleLabel, td a.CollapsibleLabel { + margin: 0; + padding: 0px 0pt 0px 16px; + font-size: 8pt; + text-decoration: none; + color: #555; + background: url(../images/mini-arrow-orange.gif) no-repeat left; +} +/* Beware: IE6 does not support multiple selector with multiple classes, only the last class is used */ +a.CollapsibleLabel.open, td a.CollapsibleLabel.open { + margin: 0; + padding: 0px 0pt 0px 16px; + font-size: 8pt; + text-decoration: none; + color: #ea7d1e; + background: url(../images/mini-arrow-orange-open.gif) no-repeat left; +} +.page_header { + background-color: #f1f1f1; + padding: 5px; +} +/* move up a header immediately following a display block (i.e. "actions" menu) */ +.display_block + .page_header { + margin-top: -8px; +} +.notreeview li { + background: url(../images/tv-item.gif) 0 0 no-repeat; +} +.notreeview .collapsable { + background-image: url(../images/tv-collapsable.gif); +} +.notreeview .expandable { + background-image: url(../images/tv-expandable.gif); +} +.notreeview .last { + background-image: url(../images/tv-item-last.gif); +} +.notreeview .lastCollapsable { + background-image: url(../images/tv-collapsable-last.gif); +} +.notreeview .lastExpandable { + background-image: url(../images/tv-expandable-last.gif); +} +#OrganizationSelection { + padding: 5px 0px 16px 20px; +} +/* popup menus */ +div.itop_popup { + margin: 0; + padding: 0; + float: right; +} +div.itop_popup > ul > li { + list-style: none; + cursor: pointer; + position: relative; +} +div.actions_menu > ul { + height: 19px; + line-height: 17px; + vertical-align: middle; + display: block; + nowidth: 70px; + padding-left: 5px; + /* Nasty work-around for IE... en attendant mieux */ + background: #ea7d1e url(../images/actions_left.png?v=v2.5.0) no-repeat top left; + cursor: pointer; + margin: 0; +} +div.actions_menu > ul > li { + float: left; + list-style: none; + font-size: 11px; + font-family: Tahoma, sans-serif; + height: 17px; + padding-right: 16px; + padding-left: 4px; + background: url(../images/actions_right.png?v=v2.5.0) no-repeat top right transparent; + font-weight: bold; + color: #fff; + vertical-align: middle; + margin: 0; +} +#logOffBtn > ul > li { + list-style: none; + vertical-align: middle; + margin: 0; + padding-left: 10px; + padding-right: 10px; + cursor: pointer; +} +#logOffBtn > ul { + list-style: none; + vertical-align: middle; + margin: 0; + padding: 0; + height: 25px; +} +.itop_popup li a, #logOffBtn li a { + display: block; + padding: 5px 12px; + text-decoration: none; + nowidth: 70px; + color: #000; + font-weight: bold; + white-space: nowrap; + background: #fff; +} +#logOffBtn li span { + display: block; + padding: 5px 12px; + text-decoration: none; + nowidth: 70px; + color: #000; + white-space: nowrap; + background: #fff; +} +.itop_popup ul { + padding-left: 0; +} +.menucontainer div.toolkit_menu { + margin-left: 10px; +} +.itop_popup li a:hover, #logOffBtn li a:hover { + background: #1a4473; +} +.itop_popup ul > li > ul, #logOffBtn ul > li > ul { + border: 1px solid black; + background: #fff; +} +.itop_popup li > ul, #logOffBtn li > ul { + margin: 0; + padding: 0; + position: absolute; + display: none; + border-top: 1px solid white; + z-index: 1500; +} +.itop_popup li ul li, #logOffBtn li ul li { + float: none; + display: inline; +} +.itop_popup li ul li a, #logOffBtn li ul li a { + width: auto; + text-align: left; +} +.itop_popup li ul li a:hover, #logOffBtn li ul li a:hover { + background: #ea7d1e; + color: #fff; + font-weight: bold; +} +.itop_popup > ul { + margin: 0; +} +hr.menu-separator { + border: none 0; + border-top: 1px solid #ccc; + color: #ccc; + background-color: transparent; + height: 1px; + margin: 3px; + cursor: default; +} +/************************************/ +.wizHeader { + background: #1c94c4; + padding: 15px; +} +.wizContainer { + border: 5px solid #1c94c4; + background: #d6e8ef; + padding: 5px; +} +.wizContainer table tr td { + background: transparent; +} +.alignRight { + text-align: right; + padding: 3px; +} +.alignLeft { + text-align: left; + padding: 3px; +} +.red { + background-color: #ff6000; + color: #000; +} +th.red { + background: url(../images/red-header.gif) bottom left repeat-x; + color: #000; +} +.green { + background-color: #0c0; + color: #000; +} +th.green { + background: url(../images/green-header.gif) bottom left repeat-x; + color: #000; +} +.orange { + background-color: #ffde00; + color: #000; +} +th.orange { + background: url(../images/orange-header.gif) bottom left repeat-x; + color: #000; +} +/* For Date Picker: Creates a little calendar icon + * instead of a text link for "Choose date" + */ +td a.dp-choose-date, a.dp-choose-date, td a.dp-choose-date:hover, a.dp-choose-date:hover, td a.dp-choose-date:visited, a.dp-choose-date:visited { + float: left; + width: 16px; + height: 16px; + padding: 0; + margin: 5px 3px 0; + display: block; + text-indent: -2000px; + overflow: hidden; + background: url(../images/calendar.png?v=v2.5.0) no-repeat; +} +td a.dp-choose-date.dp-disabled, a.dp-choose-date.dp-disabled { + background-position: 0 -20px; + cursor: default; +} +/* For Date Picker: makes the input field shorter once the date picker code + * has run (to allow space for the calendar icon) + */ +input.dp-applied { + width: 140px; + float: left; +} +/* For search forms */ +.mini_tabs a { + text-decoration: none; + font-weight: bold; + color: #ccc; + background-color: #333; + padding-left: 1em; + padding-right: 1em; + padding-bottom: 0.25em; +} +.mini_tabs a.selected { + color: #fff; + background-color: #1c94c4; + padding-top: 0.25em; +} +.mini_tabs ul { + margin: -10px; +} +.mini_tabs ul li { + float: right; + list-style: none; + nopadding-left: 1em; + nopadding-right: 1em; + margin-top: 0; +} +/* Search forms v2 */ +.search_box { + box-sizing: border-box; + position: relative; + z-index: 1100; + /* To be over the table block/unblock UI. Not very sure about this. */ + text-align: center; + /* Used when form is closed */ + /* Sizing reset */ +} +.search_box * { + box-sizing: border-box; +} +.search_form_handler { + position: relative; + z-index: 10; + width: 100%; + margin-left: auto; + margin-right: auto; + font-size: 12px; + text-align: initial; + /* To compensate .search_box:text-align */ + border: 1px solid #3f7294; + /* Sizing reset */ + /* Hyperlink reset */ + /* Input reset */ + /* List helpers */ +} +.search_form_handler * { + box-sizing: border-box; +} +.search_form_handler a { + color: inherit; + text-decoration: none; +} +.search_form_handler input[type="text"], .search_form_handler select { + padding: 1px 2px; +} +.search_form_handler:not(.closed) .sf_title .sft_short { + display: none; +} +.search_form_handler:not(.closed) .sf_title .sft_toggler { + transform: rotateX(180deg); + transition: transform 0.5s linear; +} +.search_form_handler.closed { + margin-top: -0.25em; + /* To remove top padding from the parent .display_block */ + margin-bottom: 0.5em; + width: 150px; + overflow: hidden; + border-radius: 0 0 4px 4px; +} +.search_form_handler.closed .sf_criterion_area { + height: 0; + opacity: 0; + padding: 0; +} +.search_form_handler.closed .sf_title { + padding: 6px 8px; + text-align: center; + font-size: 12px; +} +.search_form_handler.closed .sf_title .sft_long { + display: none; +} +.search_form_handler.closed .sf_title .sft_refresh { + display: none; + line-height: 10pt; +} +.search_form_handler:not(.no_auto_submit) .sfc_fg_apply { + display: none; +} +.search_form_handler.no_auto_submit .sfc_fg_search { + display: none; +} +.search_form_handler .sf_title { + transition: opacity 0.3s, background-color 0.3s, color 0.3s linear; + padding: 8px 10px; + margin: 0; + color: #fff; + background-color: #3f7294; + cursor: pointer; + /* Pictogram */ +} +.search_form_handler .sf_title .sft_picto { + display: none; + /* TODO: Remove this class and the correspondig DOM element if this option is kept. */ + margin-right: 10px; +} +.search_form_handler .sf_title .sft_refresh, .search_form_handler .sf_title .sft_toggler { + transition: color 0.2s ease-in-out, transform 0.4s ease-in-out; +} +.search_form_handler .sf_title .sft_refresh:hover, .search_form_handler .sf_title .sft_toggler:hover { + color: #f1f1f1; +} +.search_form_handler .sf_title .sft_refresh { + font-size: 10pt; + line-height: 13pt; +} +.search_form_handler .sf_title .sft_toggler { + margin-left: 0.7em; +} +.search_form_handler .sf_message { + display: none; + margin: 8px 8px 0px 8px; + border-radius: 0px; +} +.search_form_handler .sf_criterion_area { + /*display: none;*/ + padding: 8px 8px 3px 8px; + /* padding-bottom must equals to padding-top - .search_form_criteria:margin-bottom */ + background-color: #fff; + /* Common style between criterion and more criterion */ + /* Criteria tags */ + /* More criterion */ +} +.search_form_handler .sf_criterion_area .search_form_criteria, .search_form_handler .sf_criterion_area .sf_more_criterion { + position: relative; + display: inline-block; + margin-bottom: 5px; + vertical-align: top; +} +.search_form_handler .sf_criterion_area .search_form_criteria.opened, .search_form_handler .sf_criterion_area .sf_more_criterion.opened { + margin-bottom: 0px; + /* To compensate the .sfc/.sfm_header:padding-bottom: 13px */ +} +.search_form_handler .sf_criterion_area .search_form_criteria.opened .sfc_header, .search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfc_header, .search_form_handler .sf_criterion_area .search_form_criteria.opened .sfm_header, .search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfm_header { + border-bottom: none !important; + box-shadow: none !important; + padding-bottom: 13px; + /* Must be equal to .search_form_criteria:margin-bottom + this:padding-bottom */ +} +.search_form_handler .sf_criterion_area .search_form_criteria > *, .search_form_handler .sf_criterion_area .sf_more_criterion > * { + padding: 7px 8px; + vertical-align: top; + border: 1px solid #ccc; + border-radius: 1px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); +} +.search_form_handler .sf_criterion_area .search_form_criteria .sfc_form_group, .search_form_handler .sf_criterion_area .sf_more_criterion .sfc_form_group, .search_form_handler .sf_criterion_area .search_form_criteria .sfm_content, .search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content { + position: absolute; + z-index: -1; + min-width: 100%; + left: 0px; + margin-top: -1px; +} +.search_form_handler .sf_criterion_area .search_form_criteria { + margin-right: 30px; + /* Non editable criteria */ + /* Draft criteria (modifications not applied) */ + /* Opened criteria (form group displayed) */ + /* Top left corner icons */ + /* Special criterion processing */ +} +.search_form_handler .sf_criterion_area .search_form_criteria.locked { + background-color: #f1f1f1; +} +.search_form_handler .sf_criterion_area .search_form_criteria.locked .sfc_title { + user-select: none; + cursor: initial; +} +.search_form_handler .sf_criterion_area .search_form_criteria.draft .sfc_header, .search_form_handler .sf_criterion_area .search_form_criteria.draft .sfc_form_group { + border-style: dashed; +} +.search_form_handler .sf_criterion_area .search_form_criteria.draft .sfc_title { + font-style: italic; +} +.search_form_handler .sf_criterion_area .search_form_criteria.opened { + z-index: 1; + /* To be over other criterion */ +} +.search_form_handler .sf_criterion_area .search_form_criteria.opened .sfc_toggle { + transform: rotateX(-180deg); +} +.search_form_handler .sf_criterion_area .search_form_criteria.opened .sfc_form_group { + display: block; +} +.search_form_handler .sf_criterion_area .search_form_criteria.opened_left .sfc_form_group { + left: auto; + right: 0px; +} +.search_form_handler .sf_criterion_area .search_form_criteria:not(:last-of-type)::after { + /* TODO: Find an elegant way to do this, without hardcoding the content (could be a