mirror of
https://github.com/Combodo/iTop.git
synced 2026-04-23 10:38:45 +02:00
Advanced search: WIP POC, UI/UX.
SVN:b1162[5439]
This commit is contained in:
Guillaume Lajarige
@@ -28,8 +28,8 @@ $box-radius: 0px;
|
||||
$box-shadow-regular: 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
// - Boxes
|
||||
$box-blue-color: #2D2D2D;
|
||||
$box-blue-bg-color: #d6e8ef;
|
||||
$box-blue-border-color: #1c94c4;
|
||||
$box-blue-bg-color: #f0f3f5;
|
||||
$box-blue-border-color: #3f7294;
|
||||
$box-blue-border: 1px solid $box-blue-border-color;
|
||||
$box-blue-radius: 1px;
|
||||
|
||||
|
||||
@@ -704,35 +704,6 @@ input.dp-applied {
|
||||
}
|
||||
}
|
||||
}*/
|
||||
.DrawerClosed {
|
||||
display: none;
|
||||
}
|
||||
.DrawerHandle {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
background: url(../images/drawer-handle.gif) bottom no-repeat transparent;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
/* center the block */
|
||||
width: 100px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
div.HRDrawer {
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: #1c94c4;
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
display: block;
|
||||
}
|
||||
.mini_tabs a {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
@@ -759,10 +730,18 @@ div.HRDrawer {
|
||||
}
|
||||
/* Search forms v2 */
|
||||
/* TODO: Remove comment before final commit */
|
||||
.search_box {
|
||||
box-sizing: border-box;
|
||||
/* Sizing reset */
|
||||
}
|
||||
.search_box * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.search_form_handler {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
font-size: 12px;
|
||||
border: 1px solid #3f7294;
|
||||
/* Sizing reset */
|
||||
/* Hyperlink reset */
|
||||
}
|
||||
@@ -773,7 +752,30 @@ div.HRDrawer {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.search_form_handler.opened .sf_title .sft_toggler {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
.search_form_handler.opened .sf_criterion_area {
|
||||
/*display: inherit;*/
|
||||
}
|
||||
.search_form_handler .sf_title {
|
||||
padding: 8px 10px;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
background-color: #3f7294;
|
||||
/* Pictogram */
|
||||
}
|
||||
.search_form_handler .sf_title > span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.search_form_handler .sf_title .sft_toggler {
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
.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 */
|
||||
@@ -782,6 +784,13 @@ div.HRDrawer {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria, .search_form_handler .sf_criterion_area .sf_more_criterion {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.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;
|
||||
@@ -791,9 +800,9 @@ div.HRDrawer {
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria > *, .search_form_handler .sf_criterion_area .sf_more_criterion > * {
|
||||
padding: 7px 8px;
|
||||
vertical-align: top;
|
||||
background-color: #d6e8ef;
|
||||
background-color: #f0f3f5;
|
||||
color: #2d2d2d;
|
||||
border: 1px solid #1c94c4;
|
||||
border: 1px solid #3f7294;
|
||||
border-radius: 1px;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
@@ -808,7 +817,6 @@ div.HRDrawer {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
/* Non editable criteria */
|
||||
/* Draft criteria (modifications not applied) */
|
||||
/* Opened criteria (form group displayed) */
|
||||
@@ -828,13 +836,20 @@ div.HRDrawer {
|
||||
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 .sfc_close, .search_form_handler .sf_criterion_area .search_form_criteria .sfc_toggle {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
color: #1c94c4;
|
||||
color: #3f7294;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_close {
|
||||
right: 7px;
|
||||
@@ -842,10 +857,7 @@ div.HRDrawer {
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_toggle {
|
||||
display: inline-block;
|
||||
right: 23px;
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_toggle.opened {
|
||||
transform: rotateZ(-180deg);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .search_form_criteria .sfc_title {
|
||||
padding-right: 35px;
|
||||
@@ -896,7 +908,7 @@ div.HRDrawer {
|
||||
bottom: 4px;
|
||||
right: 0px;
|
||||
cursor: pointer;
|
||||
color: #1c94c4;
|
||||
color: #3f7294;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
@@ -942,11 +954,15 @@ div.HRDrawer {
|
||||
.search_form_handler .sf_criterion_area .sf_more_criterion.opened .sfm_content {
|
||||
display: inherit;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .sf_more_criterion.opened_left .sfm_content {
|
||||
left: auto;
|
||||
right: 0px;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_toggler .sfm_tg_title {
|
||||
margin-right: 7px;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_toggler .sfm_tg_icon {
|
||||
color: #1c94c4;
|
||||
color: #3f7294;
|
||||
}
|
||||
.search_form_handler .sf_criterion_area .sf_more_criterion .sfm_content {
|
||||
display: none;
|
||||
|
||||
@@ -786,36 +786,6 @@ input.dp-applied {
|
||||
}
|
||||
}
|
||||
}*/
|
||||
.DrawerClosed {
|
||||
display: none;
|
||||
}
|
||||
.DrawerHandle {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
background: url(../images/drawer-handle.gif) bottom no-repeat transparent;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
/* center the block */
|
||||
width: 100px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div.HRDrawer {
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: $complement-color;
|
||||
margin-top: 10px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
display: block;
|
||||
}
|
||||
.mini_tabs a {
|
||||
text-decoration: none;
|
||||
font-weight:bold;
|
||||
@@ -842,10 +812,19 @@ div.HRDrawer {
|
||||
}
|
||||
/* Search forms v2 */
|
||||
/* TODO: Remove comment before final commit */
|
||||
.search_box{
|
||||
box-sizing: border-box;
|
||||
|
||||
/* Sizing reset */
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.search_form_handler{
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
font-size: 12px;
|
||||
border: 1px solid $box-blue-border-color;
|
||||
|
||||
/* Sizing reset */
|
||||
*{
|
||||
@@ -857,7 +836,37 @@ div.HRDrawer {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.opened{
|
||||
.sf_title{
|
||||
.sft_toggler{
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
}
|
||||
.sf_criterion_area{
|
||||
/*display: inherit;*/
|
||||
}
|
||||
}
|
||||
|
||||
.sf_title{
|
||||
padding: 8px 10px;
|
||||
margin: 0;
|
||||
color: #ffffff;
|
||||
background-color: $box-blue-border-color;
|
||||
|
||||
/* Pictogram */
|
||||
> span{
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.sft_toggler{
|
||||
transition: all 0.4s ease-in-out;
|
||||
}
|
||||
}
|
||||
.sf_criterion_area{
|
||||
/*display: none;*/
|
||||
padding: 8px 8px 3px 8px; /* padding-bottom must equals to padding-top - .search_form_criteria:margin-bottom */
|
||||
background-color: $white;
|
||||
|
||||
/* Common style between criterion and more criterion */
|
||||
.sf_active_criterion,
|
||||
.sf_more_criterion {
|
||||
@@ -867,7 +876,11 @@ div.HRDrawer {
|
||||
|
||||
.search_form_criteria,
|
||||
.sf_more_criterion {
|
||||
margin-bottom: 5px;
|
||||
|
||||
&.opened{
|
||||
margin-bottom: 0px; /* To compensate the .sfc/.sfm_header:padding-bottom: 13px */
|
||||
|
||||
.sfc_header,
|
||||
.sfm_header{
|
||||
border-bottom: none !important;
|
||||
@@ -900,7 +913,6 @@ div.HRDrawer {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
/* Non editable criteria */
|
||||
&.locked{
|
||||
@@ -921,10 +933,19 @@ div.HRDrawer {
|
||||
&.opened{
|
||||
z-index: 1; /* To be over other criterion */
|
||||
|
||||
.sfc_toggle{
|
||||
transform: rotateX(-180deg);
|
||||
}
|
||||
.sfc_form_group{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.opened_left{
|
||||
.sfc_form_group{
|
||||
left: auto;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Top left corner icons */
|
||||
.sfc_close,
|
||||
@@ -939,11 +960,7 @@ div.HRDrawer {
|
||||
.sfc_toggle{
|
||||
display: inline-block;
|
||||
right: 23px;
|
||||
transition: all 0.4s ease-in-out;
|
||||
|
||||
&.opened{
|
||||
transform: rotateZ(-180deg);
|
||||
}
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.sfc_title{
|
||||
@@ -1074,6 +1091,12 @@ div.HRDrawer {
|
||||
display: inherit;
|
||||
}
|
||||
}
|
||||
&.opened_left{
|
||||
.sfm_content{
|
||||
left: auto;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.sfm_toggler{
|
||||
.sfm_tg_title{
|
||||
|
||||
Reference in New Issue
Block a user