@readme/markdown 6.74.2 → 6.75.0-beta.10

package/components/Embed/style.scss

@@ -1,38 +1,33 @@
 .markdown-body .embed {
-  $embed: '.embed';
-
-  background: transparent;
-  border-radius: 3px;
-  border-radius: var(--md-code-radius, var(--markdown-radius, 3px));
-  box-shadow: inset 0 0 0 1px rgba(black, 0.15);
-  color: var(--md-code-text, inherit);
-  padding: 15px;
-  transition: 0.3s ease;
-
-  &:hover {
-    background: var(--md-code-background, #f6f8fa);
-    box-shadow: inset 0 0 0 1px rgba(black, 0.1);
-  }
-  @at-root .markdown-body > #{$embed}_hasImg:nth-of-type(odd) {
-    margin-right: 30px;
-    padding-right: 0;
-    #{$embed}-link {
-      flex-direction: row-reverse;
+  $B: '.embed';
+  & {
+    padding: 15px;
+    color: var(--md-code-text, inherit);
+    border-radius: var(--md-code-radius, var(--markdown-radius, 3px));
+    border-radius: 3px;
+    background: transparent;
+    box-shadow: inset 0 0 0 1px rgba(black, .15);
+    transition: .3s ease;
+    &:hover {
+      background: var(--md-code-background, #f6f8fa);
+      box-shadow: inset 0 0 0 1px rgba(black, .1);
     }
-    #{$embed}-img {
-      box-shadow: -0.3em 0.3em 0.9em -0.3em rgba(black, 0.15);
-      margin-left: 0.88em;
-      margin-right: -30px;
+    @at-root .markdown-body > #{$B}_hasImg:nth-of-type(odd) {
+      margin-right: 30px;
+      padding-right: 0;
+      #{$B}-link { flex-direction: row-reverse }
+      #{$B}-img {
+        margin-left: .88em;
+        margin-right: -30px;
+        box-shadow: -.3em .3em .9em -.3em rgba(black, .15);
+      }
     }
-  }
-  @at-root .markdown-body > #{$embed}_hasImg:nth-of-type(even) {
-    margin-left: 30px;
-    padding-left: 0;
-    #{$embed}-img {
-      margin-left: -30px;
+    @at-root .markdown-body > #{$B}_hasImg:nth-of-type(even) {
+      margin-left: 30px;
+      padding-left: 0;
+      #{$B}-img { margin-left: -30px }
     }
   }
-
   &:empty {
     display: none;
   }
@@ -40,87 +35,84 @@
   &-media {
     display: flex;
     justify-content: center;
-
-    > :only-child {
-      border-radius: 0 !important;
+    >:only-child {
       flex: 1;
       margin: -15px;
+      border-radius: 0 !important;
     }
   }
 
   &-link {
+    display: flex;
     align-items: center;
     color: var(--markdown-text, #333);
-    display: flex;
     text-decoration: none !important;
   }
 
   &-body {
     flex: 1;
     line-height: 1.3;
-    &,
-    #{$embed}-title {
+    &, #{$B}-title {
       font-size: 1.15em;
       overflow: hidden;
-      text-overflow: ellipsis;
       white-space: nowrap;
+      text-overflow: ellipsis;
     }
-    #{$embed}-provider {
+    #{$B}-provider {
       display: block;
-      opacity: 0.88;
       text-decoration-color: transparent !important;
+      opacity: .88;
     }
-
     &-url {
-      opacity: 0.75;
+      opacity: .75;
     }
   }
 
   &-provider {
     font-size: 0.8em;
     line-height: 1.6;
-    transition: 0.2 ease;
-
-    code {
-      opacity: 0.8;
-    }
 
     code:only-child {
-      background: transparent;
       display: block;
-      font-size: inherit !important;
-      margin: 0;
+      width: 100%;
+      font-size: 1.15em;
       overflow: hidden;
-      padding: 0;
-      text-overflow: ellipsis;
       white-space: nowrap;
-      width: 100%;
+      text-overflow: ellipsis;
+      background: transparent;
+      margin: 0;
+      padding: 0;
+      font-size: inherit !important;
     }
-  }
+    transition: .2 ease;
+    code {
+      opacity: 0.8;
+    }
+   }
 
   &-img {
-    background: white;
-    border: 1px solid rgba(black, 0.15);
-    border-radius: 3px;
-    box-shadow: 0.3em 0.3em 0.9em -0.3em rgba(black, 0.15);
-    margin: 0 0.88em 0 0;
+    width: 5em;
     max-width: 5em;
+    margin: 0 .88em 0 0;
     padding: 4px;
+    background: white;
+    border: 1px solid rgba(black, .15);
+    border-radius: 3px;
     transition: inherit;
-    width: 5em;
+    box-shadow: .3em .3em .9em -.3em rgba(black, .15);
   }
-  &:not(:hover) #{$embed}-img {
-    box-shadow: 0 0.25em 1em -0.5em rgba(black, 0.133);
+  &:not(:hover) #{$B}-img {
+    box-shadow: 0 .25em 1em -.5em rgba(black, .133);
   }
-  &:hover #{$embed}-img {
-    border: 1px solid rgba(black, 0.2);
+  &:hover #{$B}-img {
+    border: 1px solid rgba(black, .2);
   }
 
   &-favicon {
+    width: 12px !important;
     height: 12px !important;
-    margin-bottom: 12px;
-    margin-right: 6px;
     margin-top: 4px;
-    width: 12px !important;
+    margin-right: 6px;
+    margin-bottom: 12px;
   }
-}
+}

package/components/GlossaryItem/style.scss

@@ -1,47 +1,36 @@
-/* stylelint-disable declaration-property-value-disallowed-list */
-/* stylelint-disable custom-property-pattern */
-/* stylelint-disable order/order */
 .GlossaryItem {
   &-trigger {
-    border-bottom: 1px dotted #737c83;
+    border-bottom: 1px solid #737c83;
+    border-style: dotted;
+    border-top: none;
     border-left: none;
     border-right: none;
-    border-top: none;
     cursor: pointer;
   }
 
   &-tooltip-content {
     --GlossaryItem-bg: var(--color-bg-page, var(--white));
     --GlossaryItem-color: var(--color-text-default, var(--gray20));
-    --GlossaryItem-shadow: var(
-      --box-shadow-menu-light,
-      0 5px 10px rgba(0, 0, 0, 0.05),
-      0 2px 6px rgba(0, 0, 0, 0.025),
-      0 1px 3px rgba(0, 0, 0, 0.025)
-    );
+    --GlossaryItem-shadow: var(--box-shadow-menu-light, 0 5px 10px rgba(0, 0, 0, .05),
+      0 2px 6px rgba(0, 0, 0, .025),
+      0 1px 3px rgba(0, 0, 0, .025));
 
     /* what the dark-mode mixin does in the readme project */
     [data-color-mode='dark'] & {
       --GlossaryItem-bg: var(--gray15);
       --GlossaryItem-color: var(--color-text-default, var(--white));
-      --GlossaryItem-shadow: var(
-        --box-shadow-menu-dark,
-        0 1px 3px rgba(0, 0, 0, 0.025),
+      --GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025),
         0 2px 6px rgba(0, 0, 0, 0.025),
-        0 5px 10px rgba(0, 0, 0, 0.05)
-      );
+        0 5px 10px rgba(0, 0, 0, 0.05))
     }
 
     @media (prefers-color-scheme: dark) {
-      [data-color-mode='system'] & {
+      [data-color-mode='auto'] & {
         --GlossaryItem-bg: var(--Tooltip-bg, var(--gray0));
         --GlossaryItem-color: var(--color-text-default, var(--white));
-        --GlossaryItem-shadow: var(
-          --box-shadow-menu-dark,
-          0 1px 3px rgba(0, 0, 0, 0.025),
+        --GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025),
           0 2px 6px rgba(0, 0, 0, 0.025),
-          0 5px 10px rgba(0, 0, 0, 0.05)
-        );
+          0 5px 10px rgba(0, 0, 0, 0.05))
       }
     }
 

package/components/Heading/style.scss

@@ -1,43 +1,37 @@
 .heading.heading {
-  align-items: center;
   display: flex;
   justify-content: flex-start;
+  align-items: center;
   position: relative;
-
   .heading-text {
     flex: 1 100%;
   }
-
   .heading-anchor-deprecated {
     position: absolute;
     top: 0;
   }
-
   .heading-anchor {
     top: -1rem !important;
   }
-
   .heading-anchor,
   .heading-anchor-icon {
-    color: inherit;
+    position: absolute !important;
     display: inline !important;
-    font-size: 0.8rem !important;
-    margin-right: -0.8rem;
     order: -1;
-    padding: 0.8rem 0.2rem 0.8rem 0 !important;
-    position: absolute !important;
     right: 100%;
-    text-decoration: none;
     top: unset !important;
+    margin-right: -.8rem;
+    padding: .8rem .2rem .8rem 0 !important;
+    font-size: .8rem !important;
+    text-decoration: none;
+    color: inherit;
     transform: translateX(-100%);
-    transition: 0.2s ease;
-
+    transition: .2s ease;
     &:hover {
       opacity: 1;
     }
   }
-
   &:not(:hover) .heading-anchor-icon {
     opacity: 0;
   }
-}
+}

package/components/Image/index.jsx

@@ -48,12 +48,15 @@ class Image extends React.Component {
 
   render() {
     const { props } = this;
-    const { alt, lazy = true, ...otherProps } = props;
+
+    const { alt, lazy = true } = props;
 
     if (this.isEmoji) {
-      return <img alt={alt} loading={lazy ? 'lazy' : ''} {...otherProps} />;
+      return <img {...props} alt={alt} loading={lazy ? 'lazy' : ''} />;
     }
 
+    const align = props.align === 'center' ? 'middle' : props.align;
+
     return (
       <span
         aria-label={alt}
@@ -64,7 +67,7 @@ class Image extends React.Component {
         tabIndex={0}
       >
         <span className="lightbox-inner">
-          <img alt={alt} loading={lazy ? 'lazy' : ''} {...otherProps} />
+          <img {...props} align={align} alt={alt} loading={lazy ? 'lazy' : ''} />
         </span>
       </span>
     );

package/components/Image/style.scss

@@ -1,17 +1,12 @@
-/* stylelint-disable selector-max-compound-selectors */
-/* stylelint-disable no-descending-specificity */
-/* stylelint-disable font-family-no-missing-generic-family-keyword */
 %img-align {
   &-right {
     float: right;
     margin-left: 0.75rem;
   }
-
   &-left {
     float: left;
     margin-right: 0.75rem;
   }
-
   &-center {
     display: block;
   }
@@ -19,35 +14,36 @@
 
 .markdown-body {
   img {
-    border-style: none;
-    box-sizing: content-box;
-    display: inline-block;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 100%;
-    outline: none !important;
-    vertical-align: middle;
+    & {
+      box-sizing: content-box;
+      display: inline-block;
+      vertical-align: middle;
+      max-width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+      border-style: none;
+
+      outline: none !important;
+    }
 
     &[align='right'],
     &[alt~='align-right'] {
       @extend %img-align-right;
     }
-
     &[align='left'],
     &[alt~='align-left'] {
       @extend %img-align-left;
     }
-
     &[width='80%'],
-    &[align='center'],
+    &[align='middle'],
     &[alt~='align-center'] {
       @extend %img-align-center;
     }
 
     &[width='smart'] {
-      max-height: 450px;
-      max-width: 100%;
       width: auto;
+      max-width: 100%;
+      max-height: 450px;
     }
 
     &.border {
@@ -56,12 +52,13 @@
   }
 
   figure {
-    margin: 15px auto;
-
+    & {
+      margin: 15px auto;
+    }
     figcaption {
+      margin-top: 8px;
       font-size: 0.93em;
       font-style: italic;
-      margin-top: 8px;
       text-align: center;
     }
   }
@@ -72,81 +69,83 @@
   }
 
   figure .img {
-    display: block;
+    display: inline-block;
+    &,
+    > img:only-of-type {
+      display: block;
+    }
   }
 
   .lightbox.open {
-    align-items: center;
-    background: rgba(white, 0.966);
-    display: flex;
-    flex-flow: nowrap column;
-    height: 100vh;
-    justify-content: flex-start;
-    left: 0;
-    margin-bottom: 0;
-    margin-top: 0;
-    overflow: hidden;
-    overflow-y: scroll;
-    position: fixed;
-    top: 0;
-    user-select: none;
-    width: 100vw;
-    z-index: 9999999;
+    & {
+      position: fixed;
+      z-index: 9999999;
+      top: 0;
+      left: 0;
+
+      display: flex;
+      flex-flow: nowrap column;
+      justify-content: flex-start;
+      align-items: center;
+
+      width: 100vw;
+      height: 100vh;
+      overflow: hidden;
+      overflow-y: scroll;
+      background: rgba(white, 0.966);
+      user-select: none;
+
+      margin-top: 0;
+      margin-bottom: 0;
+    }
 
     // Close Button
-    &::after {
+    //
+    &:after {
+      position: fixed;
+      top: 1em;
+      right: 1em;
       content: '\f00d';
-      cursor: pointer;
       display: inline-block;
       font: normal normal normal 2em/1 FontAwesome;
       font-size: inherit;
+      text-rendering: auto;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
-      opacity: 1;
-      position: fixed;
-      right: 1em;
-      text-rendering: auto;
-      top: 1em;
       transform: translate(0, 0);
+      display: inline-block;
+      cursor: pointer;
+
+      opacity: 1;
       transform: scale(1.5);
       transition: 0.3s 0.3s ease-in;
     }
-
-    &:not(.open)::after {
-      opacity: 0;
+    &:not(.open):after {
       transform: scale(0);
+      opacity: 0;
     }
 
     .lightbox-inner {
-      align-items: center;
-      box-sizing: content-box;
+      position: relative;
       display: inline-flex;
       justify-content: center;
-      margin: auto;
+      align-items: center;
       min-height: calc(100vh + 8px);
+      margin: auto;
       padding: 0;
-      position: relative;
+      box-sizing: content-box;
     }
 
     img {
+      width: auto !important;
       height: auto !important;
-      max-height: 97.5vh !important;
-      max-width: 97.5vw !important;
       min-width: unset !important;
-      width: auto !important;
-
+      max-width: 97.5vw !important;
+      max-height: 97.5vh !important;
       &.border,
       &:not([src$='.png']):not([src$='.svg']):not([src$='.jp2']):not([src$='.tiff']) {
         box-shadow: 0 0.5em 3em -1em rgba(0, 0, 0, 0.2);
       }
-
-      &[src$='svg'] {
-        display: block !important;
-        height: 66vw !important;
-        max-width: 100% !important;
-        min-width: 200px !important;
-        width: 42vw !important;
-      }
     }
   }
 }

package/components/Table/style.scss

@@ -1,14 +1,15 @@
-/* stylelint-disable selector-max-compound-selectors */
-/* stylelint-disable no-descending-specificity */
-/* stylelint-disable declaration-property-value-disallowed-list */
-/* stylelint-disable scss/selector-no-redundant-nesting-selector */
-@mixin markdown-table($row: #fff, $head: #f6f8fa, $stripe: #fbfcfd, $edges: #dfe2e5) {
+@mixin markdown-table(
+  $row: #fff,
+  $head: #f6f8fa,
+  $stripe: #fbfcfd,
+  $edges: #dfe2e5,
+) {
   table {
+    display: table;
     border-collapse: collapse;
     border-spacing: 0;
-    color: var(--table-text);
-    display: table;
     width: 100%;
+    color: var(--table-text);
 
     thead {
       color: var(--table-head-text, inherit);
@@ -20,7 +21,6 @@
 
     tr {
       background-color: var(--table-row, #{$row});
-
       & + tr {
         border-top: 1px solid var(--table-edges, #{$edges});
       }
@@ -29,7 +29,6 @@
     th,
     thead td {
       font-weight: 600;
-
       &:empty {
         padding: 0;
       }
@@ -37,20 +36,13 @@
 
     td,
     th {
-      border: 1px solid var(--table-edges, #{$edges});
+      padding: 0;
       color: inherit;
-      padding: 6px 13px;
       vertical-align: middle;
-
-      > :first-child,
-      > :only-child {
-        margin-top: 0 !important;
-      }
-
-      > :last-child,
-      > :only-child {
-        margin-bottom: 0 !important;
-      }
+      border: 1px solid var(--table-edges, #{$edges});
+      padding: 6px 13px;
+      > :first-child, > :only-child { margin-top:    0 !important }
+      > :last-child, > :only-child  { margin-bottom: 0 !important }
     }
 
     &:not(.plain) tr:nth-child(2n) {
@@ -65,8 +57,10 @@
   .rdmd-table {
     $border-wrap-width: 1px;
 
-    display: block;
-    position: relative;
+    & {
+      display: block;
+      position: relative;
+    }
 
     &-inner {
       box-sizing: content-box;