Merge pull request #856 from ZeitOnline/wcm-115_sidebar_toggler

WCM-115: More visible sidebar toggler

core/docs/changelog/WCM-115.changelog

@@ -0,0 +1 @@
+WCM-115: More visible sidebar toggler

core/src/zeit/cms/browser/main_template.pt

@@ -101,6 +101,9 @@
         </div>
         <div id="sidebar-dragger"
           tal:attributes="class sidebar_css">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10 1L4 7L10 13" stroke-width="1.5"/>
+            </svg>
         </div>
 
         <script type="text/javascript" tal:content="string:

core/src/zeit/cms/browser/resources/cms.css

@@ -3,6 +3,10 @@
  * normal HTML element CSS defs
  *
  * */
+:root {
+  --sidebar-folded-width: 1em;
+}
+
 body {
   position: absolute;
   top: 0;
@@ -156,7 +160,7 @@ pre {
 
 .sidebar-folded #breadcrumbs,
 #visualContentSeparator.sidebar-folded {
-   left: 1em;
+   left: calc(var(--sidebar-folded-width) + 0.66em);
 }
 
 #header.sidebar-folded > #main-navigation {
@@ -209,9 +213,15 @@ pre {
   top: 0em;
   bottom: 0;
   cursor: pointer;
-  background: transparent url("layout/sidebardragger.png") no-repeat center;
   border-right: 1px solid #e4e4e4;
   border-left: 1px solid #e4e4e4;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  stroke: #999999;
+}
+#sidebar-dragger:hover {
+  background: #f7f7f7;
 }
 
 #sidebar.sidebar-folded {
@@ -220,18 +230,18 @@ pre {
 
 #sidebar-dragger.sidebar-folded {
   left: 0;
-  width: 0.34em;
+  width: var(--sidebar-folded-width);
   cursor: pointer;
-  background: transparent url("layout/sidebardragger-open.png") no-repeat center;
   border-right: 1px solid #e4e4e4;
+  transform: rotate(180deg);
 }
 
 #sidebar .required {
 	float: right;
 }
 
 #visualContentWrapper.sidebar-folded {
-  left: 0.5em;
+  left: calc(var(--sidebar-folded-width) + 0.1em);
 }
 
 #content {