Review multiple class selection when there are many classes (#786)

* Review multiple class selection when there is many classes

* Fix widget scrollbar for macos

* Review overflow for Firefox

CHANGES.rst

@@ -6,6 +6,9 @@ There's a frood who really knows where his towel is.
 1.7b3 (unreleased)
 ^^^^^^^^^^^^^^^^^^
 
+- Review multiple class selection when there are many classes (closes `#785 <https://github.com/collective/collective.cover/issues/785>`_).
+  [rodfersou]
+
 - Small code refactor to increase future Python 3 compatibility.
   [hvelarde]
 

src/collective/cover/browser/templates/layoutedit.pt

@@ -26,7 +26,7 @@
         <metal:styles fill-slot="style_slot">
             <link rel="stylesheet" type="text/css" media="screen" href=""
                   tal:define="navroot context/@@plone_portal_state/navigation_root_url"
-                  tal:attributes="href string:${navroot}/++resource++collective.cover/css/layout_edit_201804251456.css" />
+                  tal:attributes="href string:${navroot}/++resource++collective.cover/css/layout_edit_201806251610.css" />
         </metal:styles>
         <metal:main fill-slot="main">
             <tal:block tal:define="can_export_layout view/can_export_layout">

src/collective/cover/static/css/layout_edit_201804251456.css → src/collective/cover/static/css/layout_edit_201806251610.css

@@ -735,20 +735,33 @@ body .cssclasswidget
 {
     cursor: pointer;
 }
+/* https://stackoverflow.com/a/10100209 */
+body .cssclasswidget-classlist::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 7px;
+}
+body .cssclasswidget-classlist::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0,0,0,.5);
+    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+}
 body .cssclasswidget-classlist
 {
     position: absolute;
     z-index: 1001;
 
     display: flex;
+    overflow-y: scroll;
     flex-direction: column;
 
+    max-height: 4rem;
     padding: .4rem;
 
     list-style-type: none !important;
 
     border: 1px solid #A9A9A9;
     background: #FFF;
+
 }
 body .cssclasswidget-classlist li
 {