From 0210e090f2549e038c551e4cd2a2ad9b1a896897 Mon Sep 17 00:00:00 2001 From: Guillaume Lajarige Date: Wed, 18 Apr 2018 08:34:45 +0000 Subject: [PATCH] Advanced search: Client side handles hierarchical keys correctly. SVN:trunk[5687] --- css/light-grey.css | 3349 +++++++++-------- css/light-grey.scss | 14 + dictionaries/en.dictionary.itop.ui.php | 22 +- js/search/search_form_criteria.js | 38 +- .../search_form_criteria_external_key.js | 1 + .../search_form_criteria_hierarchical_key.js | 39 +- 6 files changed, 1842 insertions(+), 1621 deletions(-) diff --git a/css/light-grey.css b/css/light-grey.css index 812f3ca83..e4f2d745c 100644 --- a/css/light-grey.css +++ b/css/light-grey.css @@ -7,232 +7,243 @@ body { /* Remove body margin/padding */ padding: 0; overflow: hidden; - /* Remove scroll bars on browser window */ } - + /* Remove scroll bars on browser window */ +} body.printable-version { margin: 1.5em; - overflow: auto; } - + 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; } - + display: none; +} .ui-layout-content { - padding-left: 10px; } - + 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; } - + 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: #eeeeee; + background-color: #eee; color: #000; border: 1px dashed #000; padding: 0.25em; - margin-top: 1em; } - + margin-top: 1em; +} h1 { font-family: Tahoma, Verdana, Arial, Helvetica; color: #000; font-weight: bold; - font-size: 12pt; } - + font-size: 12pt; +} h2 { font-family: Tahoma, Verdana, Arial, Helvetica; color: #000; font-weight: normal; - font-size: 12pt; } - + font-size: 12pt; +} h3 { font-family: Tahoma, Verdana, Arial, Helvetica; color: #000; font-weight: normal; - font-size: 10pt; } - + font-size: 10pt; +} label { - cursor: pointer; } - + cursor: pointer; +} .hilite, .hilite a, .hilite a:visited { - color: #EA7D1E; - text-decoration: none; } - + color: #ea7d1e; + text-decoration: none; +} table.datatable { width: 100%; border: 0; - padding: 0; } - + padding: 0; +} td.menucontainer { - text-align: right; } - + text-align: right; +} table.listResults { padding: 0px; - border-top: 3px solid #F1F1F1; - border-left: 3px solid #F1F1F1; + 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; } - + background-color: #fff; +} table.listResults td { - padding: 2px; } - + 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; } - + 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; } + 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: #555555; - opacity: 0.3; } - .edit-image .edit-buttons .button .ui-icon { - background-image: url("ui-lightness/images/ui-icons_ffffff_256x240.png"); } + 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; } - + 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 #DDDDDD; - 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; } - + 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; } - + clear: both; +} tr.containerHeader, tr.containerHeader td { - background: transparent; } - + background: transparent; +} tr.even td, .wizContainer tr.even td { - background-color: #F1F1F1; } - + background-color: #f1f1f1; +} tr.red_even td, .wizContainer tr.red_even td { background-color: #f97e75; - color: #fff; } - + color: #fff; +} tr.red td, .wizContainer tr.red td { background-color: #f9a397; - color: #fff; } - + color: #fff; +} tr.orange_even td, .wizContainer tr.orange_even td { - background-color: #f4d07a; } - + background-color: #f4d07a; +} tr.orange td, .wizContainer tr.orange td { - background-color: #f4e96c; } - + background-color: #f4e96c; +} tr.green_even td, .wizContainer tr.green_even td { - background-color: #bee5a3; } - + background-color: #bee5a3; +} tr.green td, .wizContainer tr.green td { - background-color: #b3e5b4; } - + 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; } - + color: #000; +} th { font-family: Tahoma, Verdana, Arial, Helvetica; font-size: 8pt; color: #1c94c4; height: 20px; - background: #F1F1F1 bottom repeat-x; } - + background: #f1f1f1 bottom repeat-x; +} th.header { cursor: pointer; background-repeat: no-repeat; background-position: center right; background-repeat: no-repeat; - padding-right: 16px; } - + padding-right: 16px; +} th.headerSortUp { background-image: url(../images/asc.gif); text-decoration: underline; - cursor: pointer; } - + cursor: pointer; +} th.headerSortDown { background-image: url(../images/desc.gif); text-decoration: underline; - cursor: pointer; } - + cursor: pointer; +} td { font-family: Tahoma, Verdana, Arial, Helvetica; font-size: 12px; color: #696969; - nobackground-color: #ffffff; - padding: 0px; } - + nobackground-color: #fff; + padding: 0px; +} tr.clicked td { font-family: Tahoma, Verdana, Arial, Helvetica; font-size: smaller; - background-color: #ffcfe8; } - + background-color: #ffcfe8; +} td.label { - vertical-align: top; } - + vertical-align: top; +} td.label span { font-family: Tahoma, Verdana, Arial, Helvetica; font-size: 12px; - color: #000000; + color: #000; padding: 5px; padding-right: 10px; font-weight: bold; vertical-align: top; text-align: right; - display: block; } - + display: block; +} fieldset td.label span { padding: 3px; - padding-right: 10px; } - + padding-right: 10px; +} fieldset { margin-top: 3px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border-style: solid; - border-color: #ddd; } - + border-color: #ddd; +} legend { font-family: Tahoma, Verdana, Arial, Helvetica; font-size: 12px; @@ -242,75 +253,75 @@ legend { font-weight: bold; -moz-border-radius: 6px; -webkit-border-radius: 6px; - border-radius: 6px; } - + border-radius: 6px; +} legend.transparent { background: transparent; - color: #333333; + color: #333; font-size: 1em; font-weight: normal; - padding: 0; } - + padding: 0; +} .ui-widget-content td legend a, .ui-widget-content td legend a:hover, .ui-widget-content td legend a:visited { - color: #fff; } - + color: #fff; +} .ui-widget-content td a, p a, p a:visited, td a, td a:visited { text-decoration: none; - color: #1c94c4; } - + 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; } - + background-image: none; +} .ui-widget-content td a:hover, p a:hover, td a:hover { text-decoration: underline; - color: #EA7D1E; } - + color: #ea7d1e; +} .cke_reset_all *:hover { text-decoration: none; - color: #000; } - + color: #000; +} table.cke_dialog_contents a.cke_dialog_ui_button_ok { color: #000; - border-color: #EA7D1E; - background: #EA7D1E; } - + border-color: #ea7d1e; + background: #ea7d1e; +} .cke_notifications_area { - display: none; } - + display: none; +} td a.no-arrow, td a.no-arrow:visited, .SearchDrawer a.no-arrow, .SearchDrawer a.no-arrow:visited { text-decoration: none; - color: #000000; + color: #000; padding-left: 0px; - background: inherit; } - + background: inherit; +} td a.no-arrow:hover { text-decoration: underline; color: #d81515; padding-left: 0px; - background: inherit; } - + background: inherit; +} td a.mailto, td a.mailto:visited { text-decoration: none; - color: #000000; + color: #000; padding-left: 20px; - background: url(../images/mail.png?v=v2.5.0) no-repeat left; } - + background: url(../images/mail.png?v=v2.5.0) no-repeat left; +} td a.mailto:hover { text-decoration: underline; - color: #EA7D1E; + color: #ea7d1e; padding-left: 20px; - background: url(../images/mail.png?v=v2.5.0) no-repeat left; } - + 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: #000000; - text-decoration: none; } - + color: #000; + text-decoration: none; +} .display_block { - padding: 0.25em; } - + padding: 0.25em; +} .actions_details { float: right; margin-top: 10px; @@ -318,83 +329,83 @@ a.small_action { padding-left: 5px; padding-top: 2px; padding-bottom: 2px; - background: #EA7D1E url(../images/actions_left.png?v=v2.5.0) no-repeat left; } - + 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; } - + padding-right: 12px; +} .actions_details a { - text-decoration: none; } - + text-decoration: none; +} .loading { - noborder: 1px dashed #CCC; + noborder: 1px dashed #ccc; background: #b9c1c8; - padding: 0.25em; } - + padding: 0.25em; +} input.textSearch { border: 1px solid #000; - font-family: Tahoma,Verdana, Arial, Helvetica, sans-serif; + font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size: 12px; - color: #000000; } - + color: #000; +} .ac_input { border: 1px solid #7f9db9; - background: #fff url(../images/ac-background.gif) no-repeat right; } - + background: #fff url(../images/ac-background.gif) no-repeat right; +} /* By Rom */ .csvimport_createobj { - color: #AA0000; - background-color: #EEEEEE; } - + color: #a00; + background-color: #eee; +} .csvimport_error { font-weight: bold; - color: #FF0000; - background-color: #EEEEEE; } - + color: #f00; + background-color: #eee; +} .csvimport_warning { - color: #CC8888; - background-color: #EEEEEE; } - + color: #c88; + background-color: #eee; +} .csvimport_ok { - color: #00000; - background-color: #BBFFBB; } - + color: #000 0; + background-color: #bfb; +} .csvimport_reconkey { font-style: italic; - color: #888888; - background-color: #FFFFF; } - + color: #888; + background-color: #fff FF; +} .csvimport_extreconkey { - color: #888888; - background-color: #FFFFFF; } - + color: #888; + background-color: #fff; +} #accordion { - display: none; } - + display: none; +} #accordion h3 { - padding: 10px; } - + padding: 10px; +} .ui-accordion-content ul { list-style: none; list-style-image: url(data:0); padding-left: 16px; - margin-top: 8px; } - + margin-top: 8px; +} .ui-accordion-content li.submenu { - margin-top: 8px; } - + 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; } - + border: 0; +} .nothing { noborder-top: 1px solid #8b8b8b; padding: 4px 0px 0px 16px; @@ -402,108 +413,108 @@ input.textSearch { background: url(../images/green-square.gif) no-repeat bottom left; color: #83b217; font-weight: bold; - text-decoration: none; } - + text-decoration: none; +} div.ui-accordion-content { padding-top: 10px; - padding-left: 10px; } - + padding-left: 10px; +} .ui-accordion-content a, ui-accordion-content a:visited { color: #1c94c4; - text-decoration: none; } - + text-decoration: none; +} .ui-accordion-content a:hover { - color: #EA7D1E; - text-decoration: none; } - + color: #ea7d1e; + text-decoration: none; +} .ui-accordion-content ul { padding-left: 0; - margin-top: 0; } - + margin-top: 0; +} .ui-accordion-content li { - color: #555555; + 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; } - + border: 0; +} a.CollapsibleLabel, td a.CollapsibleLabel { margin: 0; padding: 0px 0pt 0px 16px; font-size: 8pt; text-decoration: none; - color: #555555; - background: url(../images/mini-arrow-orange.gif) no-repeat left; } - + 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; } - + color: #ea7d1e; + background: url(../images/mini-arrow-orange-open.gif) no-repeat left; +} .page_header { - background-color: #F1F1F1; - padding: 5px; } - + 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; } - + margin-top: -8px; +} .notreeview li { - background: url(../images/tv-item.gif) 0 0 no-repeat; } - + background: url(../images/tv-item.gif) 0 0 no-repeat; +} .notreeview .collapsable { - background-image: url(../images/tv-collapsable.gif); } - + background-image: url(../images/tv-collapsable.gif); +} .notreeview .expandable { - background-image: url(../images/tv-expandable.gif); } - + background-image: url(../images/tv-expandable.gif); +} .notreeview .last { - background-image: url(../images/tv-item-last.gif); } - + background-image: url(../images/tv-item-last.gif); +} .notreeview .lastCollapsable { - background-image: url(../images/tv-collapsable-last.gif); } - + background-image: url(../images/tv-collapsable-last.gif); +} .notreeview .lastExpandable { - background-image: url(../images/tv-expandable-last.gif); } - + background-image: url(../images/tv-expandable-last.gif); +} #OrganizationSelection { - padding: 5px 0px 16px 20px; } - + padding: 5px 0px 16px 20px; +} /* popup menus */ div.itop_popup { margin: 0; padding: 0; - float: right; } - + float: right; +} div.itop_popup > ul > li { list-style: none; cursor: pointer; - position: relative; } - + position: relative; +} div.actions_menu > ul { height: 19px; line-height: 17px; vertical-align: middle; display: block; nowidth: 70px; - /* Nasty work-around for IE... en attendant mieux */ padding-left: 5px; - background: #EA7D1E url(../images/actions_left.png?v=v2.5.0) no-repeat top left; + /* 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; } - + margin: 0; +} div.actions_menu > ul > li { float: left; list-style: none; font-size: 11px; - font-family: Tahoma,sans-serif; + font-family: Tahoma, sans-serif; height: 17px; padding-right: 16px; padding-left: 4px; @@ -511,23 +522,23 @@ div.actions_menu > ul > li { font-weight: bold; color: #fff; vertical-align: middle; - margin: 0; } - + margin: 0; +} #logOffBtn > ul > li { list-style: none; vertical-align: middle; margin: 0; padding-left: 10px; padding-right: 10px; - cursor: pointer; } - + cursor: pointer; +} #logOffBtn > ul { list-style: none; vertical-align: middle; margin: 0; padding: 0; - height: 25px; } - + height: 25px; +} .itop_popup li a, #logOffBtn li a { display: block; padding: 5px 12px; @@ -536,8 +547,8 @@ div.actions_menu > ul > li { color: #000; font-weight: bold; white-space: nowrap; - background: #fff; } - + background: #fff; +} #logOffBtn li span { display: block; padding: 5px 12px; @@ -545,45 +556,45 @@ div.actions_menu > ul > li { nowidth: 70px; color: #000; white-space: nowrap; - background: #fff; } - + background: #fff; +} .itop_popup ul { - padding-left: 0; } - + padding-left: 0; +} .menucontainer div.toolkit_menu { - margin-left: 10px; } - + margin-left: 10px; +} .itop_popup li a:hover, #logOffBtn li a:hover { - background: #1A4473; } - + background: #1a4473; +} .itop_popup ul > li > ul, #logOffBtn ul > li > ul { border: 1px solid black; - background: #fff; } - + 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; } - + z-index: 1500; +} .itop_popup li ul li, #logOffBtn li ul li { float: none; - display: inline; } - + display: inline; +} .itop_popup li ul li a, #logOffBtn li ul li a { width: auto; - text-align: left; } - + text-align: left; +} .itop_popup li ul li a:hover, #logOffBtn li ul li a:hover { - background: #EA7D1E; + background: #ea7d1e; color: #fff; - font-weight: bold; } - + font-weight: bold; +} .itop_popup > ul { - margin: 0; } - + margin: 0; +} hr.menu-separator { border: none 0; border-top: 1px solid #ccc; @@ -591,53 +602,53 @@ hr.menu-separator { background-color: transparent; height: 1px; margin: 3px; - cursor: default; } - + cursor: default; +} /************************************/ .wizHeader { background: #1c94c4; - padding: 15px; } - + padding: 15px; +} .wizContainer { border: 5px solid #1c94c4; background: #d6e8ef; - padding: 5px; } - + padding: 5px; +} .wizContainer table tr td { - background: transparent; } - + background: transparent; +} .alignRight { text-align: right; - padding: 3px; } - + padding: 3px; +} .alignLeft { text-align: left; - padding: 3px; } - + padding: 3px; +} .red { background-color: #ff6000; - color: #000; } - + color: #000; +} th.red { background: url(../images/red-header.gif) bottom left repeat-x; - color: #000; } - + color: #000; +} .green { - background-color: #00cc00; - color: #000; } - + background-color: #0c0; + color: #000; +} th.green { background: url(../images/green-header.gif) bottom left repeat-x; - color: #000; } - + color: #000; +} .orange { background-color: #ffde00; - color: #000; } - + color: #000; +} th.orange { background: url(../images/orange-header.gif) bottom left repeat-x; - color: #000; } - + color: #000; +} /* For Date Picker: Creates a little calendar icon * instead of a text link for "Choose date" */ @@ -650,19 +661,19 @@ td a.dp-choose-date, a.dp-choose-date, td a.dp-choose-date:hover, a.dp-choose-da display: block; text-indent: -2000px; overflow: hidden; - background: url(../images/calendar.png?v=v2.5.0) no-repeat; } - + 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; } - + 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; } - + float: left; +} /* For search forms */ .mini_tabs a { text-decoration: none; @@ -671,23 +682,23 @@ input.dp-applied { background-color: #333; padding-left: 1em; padding-right: 1em; - padding-bottom: 0.25em; } - + padding-bottom: 0.25em; +} .mini_tabs a.selected { color: #fff; background-color: #1c94c4; - padding-top: 0.25em; } - + padding-top: 0.25em; +} .mini_tabs ul { - margin: -10px; } - + margin: -10px; +} .mini_tabs ul li { float: right; list-style: none; nopadding-left: 1em; nopadding-right: 1em; - margin-top: 0; } - + margin-top: 0; +} /* Search forms v2 */ .search_box { box-sizing: border-box; @@ -696,10 +707,11 @@ input.dp-applied { /* 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; } - + /* Sizing reset */ +} +.search_box * { + box-sizing: border-box; +} .search_form_handler { position: relative; z-index: 10; @@ -713,641 +725,750 @@ input.dp-applied { /* 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_hint, - .search_form_handler:not(.closed) .sf_title .sft_toggler { - margin-top: 4px; } - .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_hint { - display: none; } - .search_form_handler:not(.no_auto_submit) .sft_hint { - display: none; } - .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: #ffffff; - background-color: #1c94c4; - cursor: pointer; } - .search_form_handler .sf_title .sft_hint { - font-size: 8pt; - font-style: italic; } - .search_form_handler .sf_title .sft_toggler { - margin-left: 0.7em; - transition: color 0.2s ease-in-out, transform 0.4s ease-in-out; } - .search_form_handler .sf_title .sft_toggler:hover { - color: #F1F1F1; } - .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: #FFFFFF; - /* Common style between criterion and more criterion */ - /* Criteria tags */ - /* More criterion */ - /* Misc. buttons */ } - .search_form_handler .sf_criterion_area .sf_criterion_row { - position: relative; } - .search_form_handler .sf_criterion_area .sf_criterion_row:not(:first-child) { - margin-top: 20px; } - .search_form_handler .sf_criterion_area .sf_criterion_row:not(:first-child)::before { - content: ""; - position: absolute; - top: -12px; - left: 0px; - width: 100%; - border-top: 1px solid #CCCCCC; } - .search_form_handler .sf_criterion_area .sf_criterion_row:not(:first-child)::after { - content: "or"; - /* TODO: Make this into a dict entry */ - position: absolute; - top: -20px; - left: 8px; - padding-left: 5px; - padding-right: 5px; - color: #808080; - background-color: #FFFFFF; - /* Must match .sf_criterion_area:background-color */ } - .search_form_handler .sf_criterion_area .sf_criterion_row .sf_criterion_group { - display: inline; } - .search_form_handler .sf_criterion_area .search_form_criteria, - .search_form_handler .sf_criterion_area .sf_more_criterion, - .search_form_handler .sf_criterion_area .sf_button { - position: relative; - display: inline-block; - margin-right: 10px; - 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, - .search_form_handler .sf_criterion_area .sf_button.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 .search_form_criteria.opened .sfm_header, - .search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfc_header, - .search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfm_header, - .search_form_handler .sf_criterion_area .sf_button.opened .sfc_header, - .search_form_handler .sf_criterion_area .sf_button.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 > *, - .search_form_handler .sf_criterion_area .sf_button > * { - padding: 7px 8px; - vertical-align: top; - border: 1px solid #CCCCCC; - 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 .search_form_criteria .sfm_content, - .search_form_handler .sf_criterion_area .sf_more_criterion .sfc_form_group, - .search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content, - .search_form_handler .sf_criterion_area .sf_button .sfc_form_group, - .search_form_handler .sf_criterion_area .sf_button .sfm_content { - position: absolute; - z-index: -1; - min-width: 100%; - left: 0px; - margin-top: -1px; } - .search_form_handler .sf_criterion_area .search_form_criteria { - /* Non editable criteria */ - /* Draft criteria (modifications not applied) */ - /* Opened criteria (form group displayed) */ - /* Add "and" on criterion but the one and submit button */ - /* 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) { - margin-right: 30px; } - .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