fix(typeit): typeit code highlight (#284)

dillonzq · Apr 29, 2020 · 56026f9 · 56026f9
1 parent f6f7d91
commit 56026f9
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 97 deletions.
diff --git a/assets/css/_partial/_single/_code.scss b/assets/css/_partial/_single/_code.scss
@@ -54,135 +54,138 @@ code, pre, .highlight table, .highlight tr, .highlight td {
   }
 }
 
-.highlight > .chroma {
-  position: relative;
+.highlight {
   line-height: 1.4em;
   margin: .5rem 0;
 
-  .code-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    font-family: $global-font-family;
-    font-weight: bold;
-    color: $code-info-color;
-    background: darken($code-background-color, 8%);
+  > .chroma {
+    position: relative;
 
-    [theme=dark] & {
-      color: $code-info-color-dark;
-      background: darken($code-background-color-dark, 6%);
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    .code-title {
+    .code-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-sizing: border-box;
       width: 100%;
-      padding: .4rem;
-    }
+      font-family: $global-font-family;
+      font-weight: bold;
+      color: $code-info-color;
+      background: darken($code-background-color, 8%);
 
-    .code-title::after {
-      padding-left: .2rem;
-      content: 'Code';
-    }
+      [theme=dark] & {
+        color: $code-info-color-dark;
+        background: darken($code-background-color-dark, 6%);
+      }
 
-    @each $type, $text in $code-type-map {
-      &.#{$type} .code-title::after {
-        content: $text;
+      &:hover {
+        cursor: pointer;
       }
-    }
-  }
 
-  .lntd:first-child {
-    min-width: 1.6rem;
-    text-align: right;
-  }
+      .code-title {
+        width: 100%;
+        padding: .4rem;
+      }
 
-  .lntd:last-child {
-    width: 100%;
+      .code-title::after {
+        padding-left: .2rem;
+        content: 'Code';
+      }
 
-    pre {
-      @include max-content(min-width);
+      @each $type, $text in $code-type-map {
+        &.#{$type} .code-title::after {
+          content: $text;
+        }
+      }
     }
-  }
-
-  .ln {
-    padding-right: .75rem;
-  }
 
-  .hl {
-    display: block;
-    background-color: darken($code-background-color, 10%);
-
-    [theme=dark] & {
-      background-color: darken($code-background-color-dark, 5%);
+    .lntd:first-child {
+      min-width: 1.6rem;
+      text-align: right;
     }
-  }
 
-  .ln, .lnt {
-    color: $global-font-secondary-color;
+    .lntd:last-child {
+      width: 100%;
 
-    [theme=dark] & {
-      color: $global-font-secondary-color-dark;
+      pre {
+        @include max-content(min-width);
+      }
     }
-  }
-
-  .arrow {
-    padding: 0 .2rem;
-    @include transition(transform 0.2s ease);
-  }
-
-  .ellipses {
-    padding: .4rem;
-  }
 
-  .copy {
-    display: none;
-    padding: .4rem;
+    .ln {
+      padding-right: .75rem;
+    }
 
-    &:hover {
-      cursor: pointer;
-      color: $global-link-hover-color;
+    .hl {
+      display: block;
+      background-color: darken($code-background-color, 10%);
 
       [theme=dark] & {
-        color: $global-link-hover-color-dark;
+        background-color: darken($code-background-color-dark, 5%);
       }
     }
-  }
-
-  .table-wrapper {
-    max-height: 0;
-    overflow-y: hidden;
-    @include details-transition-open;
-  }
 
-  &.open {
-    .code-header {
-      background: darken($code-background-color, 3%);
+    .ln, .lnt {
+      color: $global-font-secondary-color;
 
       [theme=dark] & {
-        background: darken($code-background-color-dark, 3%);
+        color: $global-font-secondary-color-dark;
       }
     }
 
-    .table-wrapper {
-      max-height: $MAX_LENGTH;
-      @include details-transition-close;
-    }
-
     .arrow {
-      @include transform(rotate(90deg));
+      padding: 0 .2rem;
+      @include transition(transform 0.2s ease);
     }
 
     .ellipses {
-      display: none;
+      padding: .4rem;
     }
 
     .copy {
-      display: inline;
+      display: none;
+      padding: .4rem;
+
+      &:hover {
+        cursor: pointer;
+        color: $global-link-hover-color;
+
+        [theme=dark] & {
+          color: $global-link-hover-color-dark;
+        }
+      }
+    }
+
+    .table-wrapper {
+      max-height: 0;
+      overflow-y: hidden;
+      @include details-transition-open;
+    }
+
+    &.open {
+      .code-header {
+        background: darken($code-background-color, 3%);
+
+        [theme=dark] & {
+          background: darken($code-background-color-dark, 3%);
+        }
+      }
+
+      .table-wrapper {
+        max-height: $MAX_LENGTH;
+        @include details-transition-close;
+      }
+
+      .arrow {
+        @include transform(rotate(90deg));
+      }
+
+      .ellipses {
+        display: none;
+      }
+
+      .copy {
+        display: inline;
+      }
     }
   }
 

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -10,7 +10,7 @@
 {{- end -}}
 
 {{- $params := .Params | merge .Site.Params.page -}}
-{{- .Scratch.Set "version" "0.2.0" -}}
+{{- .Scratch.Set "version" "0.2.2" -}}
 
 {{- if eq hugo.Environment "production" -}}
     {{- .Scratch.Set "cdn" .Site.Params.cdn -}}

diff --git a/resources/_gen/assets/scss/css/style.template.scss_788c4a23da05f3aa3e03b28055a2e5f9.content b/resources/_gen/assets/scss/css/style.template.scss_788c4a23da05f3aa3e03b28055a2e5f9.content
diff --git a/resources/_gen/assets/scss/css/style.template.scss_84a735b886b24531b6e80c5fb2060510.content b/resources/_gen/assets/scss/css/style.template.scss_84a735b886b24531b6e80c5fb2060510.content
diff --git a/resources/_gen/assets/scss/css/style.template.scss_d40178ffcb058d725849178b0a7a43cc.content b/resources/_gen/assets/scss/css/style.template.scss_d40178ffcb058d725849178b0a7a43cc.content