WIP: Styles

Author: JeffersonBledsoe

src/collective/collectionfilter/portlets/info.pt

@@ -12,11 +12,12 @@
     <dl tal:condition="is_content_context"
       tal:define="fields view/get_fields">
       <tal:repeat repeat="field fields">
-        <dt>${python:view.get_field_title(field)}</dt>
+        <dt class="filterInfoContent__term">${python:view.get_field_title(field)}</dt>
         <tal:repeat repeat="field_value python:view.get_field_values(field)">
           <!-- <dd>${field_value/title} -->
-          <dd>
+          <dd class="filterInfoContent__definition">
             <a rel="nofollow"
+              class="filterItem"
               href="${field_value/url}">
                   ${field_value/title}
             </a>

src/collective/collectionfilter/resources/collectionfilter.less

@@ -3,15 +3,15 @@
 .collectionFilter,
 .portlet.collectionFilter,
 .collectionSortOn,
-.portlet.collectionSortOn  {
+.portlet.collectionSortOn {
   position: relative;
   background: white;
   .edit-link {
     position: absolute;
     right: 0;
     bottom: -0.5em;
     label {
-        display: none;
+      display: none;
     }
   }
 }
@@ -42,6 +42,7 @@
 .collectionSortOn .filterContent,
 .portlet.collectionSortOn .filterContent {
   padding: 1em;
+
   > ul {
     padding: 0;
     list-style: none;
@@ -50,21 +51,23 @@
       list-style-type: none;
       padding: 2px;
 
-      input[type="radio"], input[type="checkbox"] {
+      input[type="radio"],
+      input[type="checkbox"] {
         margin: 0.3em 0.5em 0 0;
         line-height: normal;
         position: absolute;
       }
       label {
         display: inline-block;
-        .filterControl, .filterLabel{
-            display: inline-block;
-            vertical-align: top;
+        .filterControl,
+        .filterLabel {
+          display: inline-block;
+          vertical-align: top;
         }
         .filterControl {
-            margin-right: 0.5em;
+          margin-right: 0.5em;
         }
-        .filterLabel{
+        .filterLabel {
           -webkit-hyphens: auto;
           -moz-hyphens: auto;
           hyphens: auto;
@@ -102,13 +105,12 @@
       }
     }
 
-
     li.selected a {
-        font-weight: bold;
+      font-weight: bold;
     }
     ul {
-        padding-left:15px;
-        list-style: none;
+      padding-left: 15px;
+      list-style: none;
     }
   }
   label {
@@ -119,3 +121,23 @@
     padding: 0 0.5em;
   }
 }
+
+.pat-collectionfilter .filterInfoContent {
+  margin-top: 0.5em;
+
+  .filterInfoContent__term {
+    @media (min-width: 480px) {
+      box-sizing: border-box;
+      float: left;
+      clear: left;
+      padding-right: 5px;
+    }
+  }
+  .filterInfoContent__definition {
+  }
+}
+
+.sectionFilter li.selected a > span {
+  font-weight: bold;
+}
+