improved display of advanced search

sites/all/modules/gui/materiobasemod/materio_search_api.module

@@ -1087,7 +1087,8 @@ function materio_search_api_advanced_search_form($form, &$form_state){
           'wrapper' => 'advancedsearch-filters-wrapper',
           // 'trigger_as' => array("name"=>"rmfilters".$l),
         ),
-        "#attributes" => array('class'=>array('rm-btn')),
+        // "#attributes" => array('class'=>array('rm-btn')),
+        '#prefix'=> '<div class="rm-btn">', '#suffix'=> '</div>',
       );
 
     } // end of lines loop

sites/all/themes/gui/materiobasetheme/css/styles.css

@@ -3941,14 +3941,14 @@ body.home-v2 #main {
         #tool-bar #materio-search-api-advanced-search-form > div .form-wrapper.right-col a.back-search-home i:before {
           font-size: 1.3em; }
       #tool-bar #materio-search-api-advanced-search-form > div .form-wrapper.right-col #edit-search {
-        margin: 1em 0 0.5em; }
+        margin: 0.5em 0 0.5em; }
   #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters {
     padding-right: 0.5em;
     margin-right: 0.5em;
     border-right: 1px solid #ccc; }
     #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .advanced-search-form-table {
       display: table;
-      border-collapse: separate;
+      border-collapse: collapse;
       border-spacing: 0 0.2em; }
     #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .advanced-search-form-headers {
       display: table-header-group;
@@ -3964,14 +3964,24 @@ body.home-v2 #main {
     #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line {
       margin: 0.3em 0;
       padding-top: 0.3em;
-      display: table-row; }
+      display: table-row;
+      vertical-align: middle; }
       #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line:not(:first-child) {
         border-top: 1px solid #ccc; }
+        #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line:not(:first-child) > * {
+          padding: 0.5em 0; }
+      #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line:first-child > * {
+        padding: 0.3em 0 0.5em; }
       #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line > * {
         display: table-cell;
         text-align: left; }
         #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line > *:not(:last-child) {
-          padding: 0 1em 0 0; }
+          padding-right: 0.5em; }
+        #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line > *:not(:first-child):not(:last-child):before {
+          content: ">";
+          color: #999;
+          font-size: 11px;
+          padding-right: 0.5em; }
       #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line .form-item {
         font-size: 12px;
         line-height: 1;
@@ -3979,14 +3989,16 @@ body.home-v2 #main {
         margin: 0 0em 0 0; }
       #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line select {
         width: auto; }
-      #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line .filter-markup span {
-        padding: 0.4em 1em;
-        display: block;
-        font-size: 11px;
-        background-color: #eee;
-        color: #777;
-        text-align: center;
-        border-radius: 7px; }
+      #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line .filter-markup {
+        position: relative; }
+        #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line .filter-markup span {
+          padding: 0.4em 1em;
+          display: inline-block;
+          width: 78%;
+          font-size: 11px;
+          color: #ccc;
+          text-align: center;
+          border-radius: 7px; }
     #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .add-filter {
       margin: 0.5em 0;
       display: table-row; }

sites/all/themes/gui/materiobasetheme/scss/styles.scss

@@ -1214,7 +1214,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
           }
         }
         #edit-search{
-          margin: 1em 0 0.5em;
+          margin: 0.5em 0 0.5em;
         }
       }
     }
@@ -1226,7 +1226,8 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
 
       .advanced-search-form-table{
         display:table;
-        border-collapse:separate;
+        // border-collapse:separate;
+        border-collapse: collapse;
         border-spacing: 0 0.2em;
 
         // min-width: 500px;
@@ -1253,16 +1254,30 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
         margin:0.3em 0;
         padding-top:0.3em;
         display: table-row;
+        vertical-align: middle;
 
         &:not(:first-child){
           border-top: 1px solid #ccc;
+          >*{
+            padding:0.5em 0;
+          }
+        }
+        &:first-child{
+          >*{padding: 0.3em 0 0.5em;}
         }
 
         >*{
           display:table-cell;
           text-align: left;
+          // padding:0;
           &:not(:last-child){
-            padding:0 1em 0 0;
+            padding-right:0.5em;
+          }
+          &:not(:first-child):not(:last-child):before{
+            content:">";
+            color: #999;
+            font-size: 11px;
+            padding-right:0.5em;
           }
         }
 
@@ -1282,16 +1297,24 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
 
         .filter-markup{
           // border-left: 1px solid #ccc;
+          position: relative;
           span{
             padding:0.4em 1em;
-            display: block;
+            display: inline-block;
+            width:78%;
             font-size: 11px;
-            background-color: #eee;
-            color:#777;
+            // background-color: #eee;
+            color:#ccc;
             text-align: center;
             border-radius: 7px;
           }
         }
+        .rm-btn{
+          // vertical-align: text-bottom;
+          // line-height: 3;
+          // height: 100%;
+          // input{margin-top:2em;}
+        }
       }
 
       // .rm-btn{