port pattern-lab/styleguidekit-assets-default#111

Author: bmuenzenmeyer

Diff for: packages/uikit-default/dist/styleguide/bower_components/prism.min.js

@@ -1006,9 +1006,9 @@
   display: -ms-inline-flexbox;
   display: inline-flex;
   /* 1 */
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
   /* 1 */
   padding: 1rem 0 0.3rem;
   color: #808080 !important;
@@ -1309,11 +1309,14 @@
   display: inline-block;
   width: 5px;
   height: 5px;
-  margin-left: 5px;
+  margin-left: 10px;
   position: relative;
-  top: 1px;
+  top: 5px;
+  left: 0;
   border-radius: 50%;
   background: #02A4D5;
+  line-height: 4px;
+  text-indent: 10px;
 }
 .pl-c-pattern-state--complete {
   background: #03790F;

Diff for: packages/uikit-default/dist/styleguide/css/pattern-lab.css

@@ -92,6 +92,8 @@ function receiveIframeMessage(event) {
 
 }
 window.addEventListener("message", receiveIframeMessage, false);
+// jshint ignore: start
+
 /*!
  * clipboard.js v1.7.1
  * https://zenorocha.github.io/clipboard.js

Diff for: packages/uikit-default/dist/styleguide/js/patternlab-pattern.js

@@ -1,3 +1,5 @@
+// jshint ignore: start
+
 /*!
  * clipboard.js v1.7.1
  * https://zenorocha.github.io/clipboard.js

Diff for: packages/uikit-default/dist/styleguide/js/patternlab-viewer.js

@@ -10,11 +10,14 @@
     display: inline-block;
     width: 5px;
     height: 5px;
-    margin-left: 5px;
+    margin-left: 10px;
     position: relative;
-    top: 1px;
+    top: 5px;
+    left: 0;
     border-radius: 50%;
     background: $pl-color-state-info;
+    line-height: 4px;
+    text-indent: 10px;
 
     &--complete {
         background: $pl-color-state-complete;
@@ -34,4 +37,4 @@
 */
 .complete:before {
     color: #03790F !important;
-}
+}

Diff for: packages/uikit-default/src/js/clipboard.min.js

@@ -52,7 +52,7 @@
  */
 .pl-c-pattern__title-link {
     display: inline-flex; /* 1 */
-    align-items: center; /* 1 */
+    align-items: flex-start; /* 1 */
     padding: $pl-pad 0 0.3rem;
     color: $pl-color-gray-50 !important;
     text-decoration: none;
@@ -128,4 +128,4 @@
         border-top-right-radius: 0;
         max-height: 150rem;
     }
-}
+}