@readme/markdown 6.75.0-beta.4 → 6.75.0

package/components/Embed/style.scss

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

package/components/GlossaryItem/index.jsx

@@ -31,7 +31,7 @@ GlossaryItem.propTypes = {
     PropTypes.shape({
       definition: PropTypes.string.isRequired,
       term: PropTypes.string.isRequired,
-    })
+    }),
   ).isRequired,
 };
 

package/components/GlossaryItem/style.scss

@@ -1,36 +1,47 @@
+/* stylelint-disable declaration-property-value-disallowed-list */
+/* stylelint-disable custom-property-pattern */
+/* stylelint-disable order/order */
 .GlossaryItem {
   &-trigger {
-    border-bottom: 1px solid #737c83;
-    border-style: dotted;
-    border-top: none;
+    border-bottom: 1px dotted #737c83;
     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, .05),
-      0 2px 6px rgba(0, 0, 0, .025),
-      0 1px 3px rgba(0, 0, 0, .025));
+    --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)
+    );
 
     /* 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='auto'] & {
+      [data-color-mode='system'] & {
         --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/HTMLBlock/index.jsx

@@ -56,8 +56,7 @@ HTMLBlock.propTypes = {
 const CreateHtmlBlock =
   ({ safeMode }) =>
   // eslint-disable-next-line react/display-name
-  props =>
-    <HTMLBlock {...props} safeMode={safeMode} />;
+  props => <HTMLBlock {...props} safeMode={safeMode} />;
 
 CreateHtmlBlock.sanitize = schema => {
   schema.tagNames.push('html-block');

package/components/Heading/index.jsx

@@ -25,7 +25,7 @@ function Heading({ tag, showAnchorIcons, ...props }) {
         aria-label={`Skip link to ${headingText}`}
         className="heading-anchor-icon fa fa-anchor"
         href={`#${props.id}`}
-      />
+      />,
     );
   }
 

package/components/Heading/style.scss

@@ -1,37 +1,43 @@
 .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 {
-    position: absolute !important;
+    color: inherit;
     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%;
-    top: unset !important;
-    margin-right: -.8rem;
-    padding: .8rem .2rem .8rem 0 !important;
-    font-size: .8rem !important;
     text-decoration: none;
-    color: inherit;
+    top: unset !important;
     transform: translateX(-100%);
-    transition: .2s ease;
+    transition: 0.2s ease;
+
     &:hover {
       opacity: 1;
     }
   }
+
   &:not(:hover) .heading-anchor-icon {
     opacity: 0;
   }
-}
+}

package/components/Image/index.jsx

@@ -48,15 +48,12 @@ class Image extends React.Component {
 
   render() {
     const { props } = this;
-
-    const { alt, lazy = true } = props;
+    const { alt, lazy = true, ...otherProps } = props;
 
     if (this.isEmoji) {
-      return <img {...props} alt={alt} loading={lazy ? 'lazy' : ''} />;
+      return <img alt={alt} loading={lazy ? 'lazy' : ''} {...otherProps} />;
     }
 
-    const align = props.align === 'center' ? 'middle' : props.align;
-
     return (
       <span
         aria-label={alt}
@@ -67,7 +64,7 @@ class Image extends React.Component {
         tabIndex={0}
       >
         <span className="lightbox-inner">
-          <img {...props} align={align} alt={alt} loading={lazy ? 'lazy' : ''} />
+          <img alt={alt} loading={lazy ? 'lazy' : ''} {...otherProps} />
         </span>
       </span>
     );
@@ -105,7 +102,6 @@ Image.sanitize = sanitizeSchema => {
 const CreateImage =
   ({ lazyImages }) =>
   // eslint-disable-next-line react/display-name
-  props =>
-    <Image lazy={lazyImages} {...props} />;
+  props => <Image lazy={lazyImages} {...props} />;
 
 module.exports = CreateImage;

package/components/Image/style.scss

@@ -1,12 +1,17 @@
+/* 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;
   }
@@ -14,36 +19,35 @@
 
 .markdown-body {
   img {
-    & {
-      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;
-    }
+    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;
 
     &[align='right'],
     &[alt~='align-right'] {
       @extend %img-align-right;
     }
+
     &[align='left'],
     &[alt~='align-left'] {
       @extend %img-align-left;
     }
+
     &[width='80%'],
-    &[align='middle'],
+    &[align='center'],
     &[alt~='align-center'] {
       @extend %img-align-center;
     }
 
     &[width='smart'] {
-      width: auto;
-      max-width: 100%;
       max-height: 450px;
+      max-width: 100%;
+      width: auto;
     }
 
     &.border {
@@ -52,13 +56,12 @@
   }
 
   figure {
-    & {
-      margin: 15px auto;
-    }
+    margin: 15px auto;
+
     figcaption {
-      margin-top: 8px;
       font-size: 0.93em;
       font-style: italic;
+      margin-top: 8px;
       text-align: center;
     }
   }
@@ -69,83 +72,81 @@
   }
 
   figure .img {
-    display: inline-block;
-    &,
-    > img:only-of-type {
-      display: block;
-    }
+    display: block;
   }
 
   .lightbox.open {
-    & {
-      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;
-    }
+    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;
 
     // Close Button
-    //
-    &:after {
-      position: fixed;
-      top: 1em;
-      right: 1em;
+    &::after {
       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;
-      transform: translate(0, 0);
-      display: inline-block;
-      cursor: pointer;
-
       opacity: 1;
+      position: fixed;
+      right: 1em;
+      text-rendering: auto;
+      top: 1em;
+      transform: translate(0, 0);
       transform: scale(1.5);
       transition: 0.3s 0.3s ease-in;
     }
-    &:not(.open):after {
-      transform: scale(0);
+
+    &:not(.open)::after {
       opacity: 0;
+      transform: scale(0);
     }
 
     .lightbox-inner {
-      position: relative;
+      align-items: center;
+      box-sizing: content-box;
       display: inline-flex;
       justify-content: center;
-      align-items: center;
-      min-height: calc(100vh + 8px);
       margin: auto;
+      min-height: calc(100vh + 8px);
       padding: 0;
-      box-sizing: content-box;
+      position: relative;
     }
 
     img {
-      width: auto !important;
       height: auto !important;
-      min-width: unset !important;
-      max-width: 97.5vw !important;
       max-height: 97.5vh !important;
+      max-width: 97.5vw !important;
+      min-width: unset !important;
+      width: auto !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/Style.jsx

@@ -19,8 +19,7 @@ Style.propTypes = {
 const CreateStyle =
   ({ safeMode }) =>
   // eslint-disable-next-line react/display-name
-  props =>
-    <Style {...props} safeMode={safeMode} />;
+  props => <Style {...props} safeMode={safeMode} />;
 
 CreateStyle.sanitize = sanitize => {
   sanitize.tagNames.push('style');

package/components/Table/style.scss

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