pattern-lab · bmuenzenmeyer · Nov 12, 2019 · Nov 11, 2019 · Nov 12, 2019 · Nov 12, 2019
@@ -30,7 +30,13 @@
   </head>
 
   <body class="pl-c-body">
-    <pl-layout></pl-layout>
+    <pl-layout>
+      <pl-header></pl-header>
+      <div class="pl-c-viewport-modal-wrapper">
+        <pl-iframe></pl-iframe>
+        <pl-drawer></pl-drawer>
+      </div>
+    </pl-layout>
 
     <!-- the template for the modal slider -->
     <script type="text/mustache" class="pl-js-panel-template-base">

@@ -37,35 +37,41 @@ <h2 class="pl-c-pattern-info__title">
   <!--end pl-c-pattern-info__description-->
   {{/ patternDescExists }} {{# lineageExists }}
   <p class="pl-c-lineage pl-js-lineage">
-    The <em>{{ patternName }}</em> pattern contains the following patterns: {{#
-    lineage }}
+    The
+    <em>{{ patternName }}</em>
+    pattern contains the following patterns: {{# lineage }}
     <a
       href="{{ lineagePath }}"
       class="pl-c-lineage__link pl-js-lineage-link"
-      data-patternPartial="{{ lineagePattern }}"
+      data-patternpartial="{{ lineagePattern }}"
     >
       {{ lineagePattern }} {{# lineageState }}<span
         class="pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}"
         title="{{ lineageState }}"
-      />{{/ lineageState }} </a
-    ><!--end pl-c-lineage__link-->
+      />
+      {{/ lineageState }}
+    </a>
+    <!--end pl-c-lineage__link-->
     {{# hasComma }}, {{/ hasComma }} {{/ lineage }}
   </p>
   <!--end pl-c-lineage-->
   {{/ lineageExists }} {{# lineageRExists }}
   <p class="pl-c-lineage">
-    The <em>{{ patternName }}</em> pattern is included in the following
-    patterns: {{# lineageR }}
+    The
+    <em>{{ patternName }}</em>
+    pattern is included in the following patterns: {{# lineageR }}
     <a
       href="{{ lineagePath }}"
       class="pl-c-lineage__link pl-js-lineage-link"
-      data-patternPartial="{{ lineagePattern }}"
+      data-patternpartial="{{ lineagePattern }}"
     >
       {{ lineagePattern }} {{# lineageState }}<span
         class="pl-c-pattern-state pl-c-pattern-state--{{ lineageState }}"
         title="{{ lineageState }}"
-      />{{/ lineageState }} </a
-    ><!--end pl-c-lineage__link-->
+      />
+      {{/ lineageState }}
+    </a>
+    <!--end pl-c-lineage__link-->
     {{# hasComma }}, {{/ hasComma }} {{/ lineageR }}
   </p>
   <!--end pl-c-lineage-->
@@ -105,6 +111,7 @@ <h3 class="pl-c-annotations__item-title">{{ title }}</h3>
             id="pl-{{ patternPartial }}-{{ id }}-tab"
             data-patternpartial="{{ patternPartial }}"
             data-panelid="{{ id }}"
+            no-smooth-scroll
             >{{ name }}</a
           >
         </li>
@@ -123,11 +130,40 @@ <h3 class="pl-c-annotations__item-title">{{ title }}</h3>
       >
         <button
           class="pl-c-code-copy-btn pl-js-code-copy-btn"
+          size="small"
           data-clipboard-target="#pl-{{ patternPartial }}-{{ id }}-panel code"
         >
-          Copy
-        </button>
+          <span class="pl-c-code-copy-btn__icon-text">Copy</span>
+          <svg
+            viewbox="0 0 24 24"
+            width="20"
+            height="20"
+            class="pl-c-code-copy-btn__icon pl-c-code-copy-btn__icon--copy"
+          >
+            <title>copy icon</title>
+            <path
+              fill="currentColor"
+              d="M18.984 21v-14.016h-10.969v14.016h10.969zM18.984 5.016c1.078 0 2.016 0.891 2.016 1.969v14.016c0 1.078-0.938 2.016-2.016 2.016h-10.969c-1.078 0-2.016-0.938-2.016-2.016v-14.016c0-1.078 0.938-1.969 2.016-1.969h10.969zM15.984 0.984v2.016h-12v14.016h-1.969v-14.016c0-1.078 0.891-2.016 1.969-2.016h12z"
+            ></path>
+          </svg>
 
+          <svg
+            class="pl-c-code-copy-btn__icon pl-c-code-copy-btn__icon--paste"
+            viewbox="0 0 16 16"
+            width="20"
+            height="20"
+          >
+            <title>clipboard</title>
+            <path
+              fill="currentColor"
+              d="M14.5 2h-4.5c0-1.105-0.895-2-2-2s-2 0.895-2 2h-4.5c-0.276 0-0.5 0.224-0.5 0.5v13c0 0.276 0.224 0.5 0.5 0.5h13c0.276 0 0.5-0.224 0.5-0.5v-13c0-0.276-0.224-0.5-0.5-0.5zM8 1c0.552 0 1 0.448 1 1s-0.448 1-1 1c-0.552 0-1-0.448-1-1s0.448-1 1-1zM14 15h-12v-12h2v1.5c0 0.276 0.224 0.5 0.5 0.5h7c0.276 0 0.5-0.224 0.5-0.5v-1.5h2v12z"
+            ></path>
+            <path
+              fill="currentColor"
+              d="M7 13.414l-3.207-3.707 0.914-0.914 2.293 1.793 4.293-3.793 0.914 0.914z"
+            ></path>
+          </svg>
+        </button>
         {{{ content }}}
       </div>
       <!--end pl-c-tabs__panel-->

@@ -1,17 +1,6 @@
 @import 'scss/01-abstracts/variables';
 @import 'scss/01-abstracts/mixins';
 
-@keyframes animateIn {
-  from {
-    transform: translate3d(-50%, -100%, 0px);
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(-50%, calc(3rem - 50%), 0px);
-  }
-}
-
 @keyframes rotate {
   0% {
     transform: rotate(0deg);
@@ -21,21 +10,34 @@
   }
 }
 
+.pl-c-loader-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.pl-c-loader-wrapper:not(:last-child){
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
 .pl-c-loader {
   z-index: 1000;
   position: absolute;
-  top: 0;
+  top: 50%;
   left: 50%;
   margin: auto;
   max-width: $pl-space * 25;
   width: calc(90vw - #{$pl-doublespace});
   border-radius: $pl-border-radius;
   background: rgba($pl-color-black, 0.9);
-  transform: translate3d(-50%, -100%, 0px);
+  transform: translate3d(-50%, -50%, 0px);
   transition: opacity 0.3s ease, transform 0.3s ease;
   pointer-events: none;
-  opacity: 0;
-  animation: animateIn ease 0.3s forwards;
+  opacity: 1;
 }
 
 .pl-c-loader__content {

@@ -62,6 +62,16 @@
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
+
+  @supports (position: sticky){
+    transform: translateY(-0.7rem);
+    float: right;
+    position: sticky;
+    top: 1rem;
+    right: 0;
+    margin-top: -2rem;
+  }
+
   padding: 0.2rem 0.4rem;
   background-color: $pl-color-gray-07;
   color: $pl-color-gray-87;
@@ -81,9 +91,32 @@
   }
 }
 
+.pl-c-code-copy-btn__icon {
+  height: 1em;
+  width: 1em;
+}
+
+.pl-c-code-copy-btn__icon--paste {
+  display: none;
+
+  .is-copied & {
+    display: inline-block;
+  }
+}
+
+.pl-c-code-copy-btn__icon--copy {
+  display: inline-block;
+
+  .is-copied & {
+    display: none;
+  }
+}
+
 .pl-c-main {
   overflow: hidden;
   max-width: 100vw;
+  padding-left: .5rem;
+  padding-right: .5rem;
 }
 
 /*------------------------------------*\

@@ -80,9 +80,9 @@
   * 1. WIP -- part of broader UI refactor
   */
   &.pl-is-active {
-    max-height: calc(100vh - #{$offset-top} - 1rem);
+    max-height: calc(95vh - #{$offset-top} - 1rem);
     max-height: calc(
-      var(--pl-viewport-height, calc(100vh - #{$offset-top})) - 1rem
+      var(--pl-viewport-height, calc(95vh - #{$offset-top})) - 1rem
     ); /* [1] */
     overflow: auto;
     -webkit-overflow-scrolling: touch;

@@ -9,16 +9,17 @@
 */
 .pl-c-html {
   min-height: 100%;
+  display: flex;
 }
 
 .pl-c-body {
   margin: 0;
   padding: 0;
+  width: 100%;
   -webkit-text-size-adjust: 100%;
   display: flex; // Required for IE 11 to display overall PL layout correctly
 }
 
-// @todo: refactor to make colors more generic to PL:
 .pl-c-body--theme-dark,
 :root {
   --theme-bg: #161b3c;

@@ -6,7 +6,7 @@
  * Pattern Lineage info
  */
 .pl-c-lineage {
-  font-size: $pl-font-size-sm-2;
+  font-size: $pl-font-size-norm;
   line-height: 1.7;
   margin-top: 0;
 }
@@ -16,9 +16,9 @@
  */
 .pl-c-lineage__link {
   font-style: italic;
-  color: inherit;
+  color: inherit; // light vs dark text
   text-decoration: underline;
-  display: inline-flex;
+  display: inline;
   align-items: center;
   transition: opacity $pl-animate-quick ease;