Styling details-summary widget marker for webkit browsers

Author: pastelsky

styles/index.scss

@@ -46,6 +46,40 @@ a {
   }
 }
 
+details:focus, summary:focus{
+  outline: none;
+  background: rgba(255,255,255,0.03);
+  border-radius: 2px;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  /* Style details arrow if on webkit */
+
+  details summary::-webkit-details-marker {
+    color: getColor(malibu);
+  }
+
+  summary::-webkit-details-marker {
+    display: none
+  }
+  summary:after {
+    content: "\F103";
+    float: left;
+    position: relative;
+    left: -2px;
+    text-align: center;
+    font-family: icons;
+    color: lighten(getColor(denim), 10%)
+  }
+
+  details[open] summary:after {
+    content: "\F101";
+    font-family: icons;
+  }
+}
+
+
+
 ::selection {
   background: transparentize(getColor(malibu), 0.65);
 }