@readme/markdown 6.62.2 → 6.62.4

package/components/Callout/index.jsx

@@ -6,7 +6,7 @@ const Callout = props => {
   const [title, ...content] = !props.title ? [null, props.children] : props.children;
 
   return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
+    // eslint-disable-next-line react/jsx-props-no-spreading, react/no-unknown-property
     <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
       <h3 className={`callout-heading${title ? '' : ' empty'}`}>
         <span className="callout-icon">{icon}</span>

package/components/Callout/style.scss

@@ -1,81 +1,100 @@
-@mixin callout ($l-offset: 1.33rem) {
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable font-family-no-missing-generic-family-keyword */
+/* stylelint-disable order/properties-alphabetical-order */
+/* stylelint-disable order/order */
+@mixin callout($l-offset: 1.33rem) {
   --background: #{lighten(#dfe2e5, 8.75%)};
   --border: #{lighten(#6a737d, 12.5%)};
 
-  & {
-    background: var(--background);
-    border-color: var(--border);
-    color: var(--text);
-    padding: $l-offset;
-  }
+  background: var(--background);
+  border-color: var(--border);
+  color: var(--text);
+  padding: $l-offset;
 
   &_info {
     $color: #46b8da;
+
     --background: #e3edf2;
     --title: #{$color};
     --border: #{lighten($color, 5%)}; // should be #5bc0de
   }
 
-  &_warn, &_warning {
+  &_warn,
+  &_warning {
     $color: #eea236;
+
     --background: #fcf8f2;
     --title: #{$color};
     --border: #{lighten($color, 5%)};
   }
 
-  &_ok, &_okay, &_success {
+  &_ok,
+  &_okay,
+  &_success {
     $color: #489e49;
+
     --background: #f3f8f3;
     --title: #{$color};
     --border: #{lighten($color, 5%)}; // should be #50af51
   }
 
-  &_err, &_error {
+  &_err,
+  &_error {
     $color: #d43f3a;
+
     --background: #fdf7f7;
     --title: #{$color};
-    --border: #{lighten($color, 5%)};  // should be #d9534f
+    --border: #{lighten($color, 5%)}; // should be #d9534f
   }
 
   > * {
     margin-left: $l-offset;
     position: relative;
   }
-  ul, ol {
+
+  ul,
+  ol {
     padding-left: 1.3em;
   }
 
   a {
     color: inherit;
   }
+
   hr {
     border-color: var(--border, var(--markdown-edge, #eee));
   }
+
   blockquote {
     color: var(--text);
     border-color: var(--border);
     border-width: 3px;
-    padding: 0 0 0 .8em;
+    padding: 0 0 0 0.8em;
   }
 
   .callout-heading {
     color: var(--title, --text);
-    margin-bottom: calc(#{$l-offset} * .5);
+    margin-bottom: calc(#{$l-offset} * 0.5);
+
     &:only-child {
       margin-bottom: 0;
     }
+
     &.empty {
       float: left;
-      margin-top: calc(#{$l-offset} * .5);
+      margin-top: calc(#{$l-offset} * 0.5);
+
       .callout-icon {
         line-height: 0;
       }
     }
+
     > * {
       color: inherit;
       margin: 0;
     }
-    &:before {
+
+    &::before {
       position: absolute;
       right: 100%;
       width: 2.4em;
@@ -83,20 +102,23 @@
       font: normal normal normal 1em/1 FontAwesome;
     }
   }
+
   .callout-icon {
     float: left;
-    margin-left: calc(-#{$l-offset} - .5em);
-    margin-right: -.25rem;
+    margin-left: calc(-#{$l-offset} - 0.5em);
+    margin-right: -0.25rem;
   }
 }
-@mixin calloutCustomIcons($R: callout) {
+@mixin callout-custom-icons($R: callout) {
   --emoji: 1em;
-  --icon-font: FontAwesome;
+  --icon-font: fontawesome;
+
   &-icon {
     font-size: var(--emoji, 0);
     color: var(--icon-color, inherit) !important;
   }
-  &-icon:before {
+
+  &-icon::before {
     content: var(--icon);
     font-family: var(--icon-font);
     font-size: var(--icon-size, 1rem);
@@ -111,22 +133,27 @@
   }
   @at-root .rdmdCallouts--useIconFont & {
     --emoji: unset;
+
     &_okay {
       /* thumbs up */
-      --icon: "\f164";
+      --icon: '\f164';
     }
+
     &_info {
       /* info circle */
-      --icon: "\f05a";
+      --icon: '\f05a';
     }
+
     &_warn {
       /* warning triangle */
-      --icon: "\f071";
+      --icon: '\f071';
     }
+
     &_error {
       /* warning circle */
-      --icon: "\f06a";
+      --icon: '\f06a';
     }
+
     &_default {
       /* warning circle */
       --emoji: 1rem;
@@ -135,10 +162,12 @@
 }
 
 .callout {
-  &.callout { // bump specificity
+  &.callout {
+    // bump specificity
     @include callout;
   }
-  @include calloutCustomIcons;
+  @include callout-custom-icons;
+
   border-top-right-radius: var(--markdown-radius);
   border-bottom-right-radius: var(--markdown-radius);
 }

package/components/Code/style.scss

@@ -1,21 +1,27 @@
-@mixin gfmCodeBaseStyles($background: #F6F8FA, $background-dark: #242E34, $text: inherit) {
-
+/* stylelint-disable no-duplicate-selectors */
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable font-family-no-missing-generic-family-keyword */
+/* stylelint-disable declaration-property-value-disallowed-list */
+/* stylelint-disable scss/selector-no-redundant-nesting-selector */
+/* stylelint-disable order/properties-alphabetical-order */
+@mixin gfm-code-base-styles($background: #f6f8fa, $background-dark: #242e34, $text: inherit) {
   code,
   kbd,
   pre {
-    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+    font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
     font-family: var(--md-code-font, SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace);
-    font-size: 1em
+    font-size: 1em;
   }
 
   code,
   pre {
-    font-size: 12px
+    font-size: 12px;
   }
 
   pre {
     margin-bottom: 0;
-    margin-top: 0
+    margin-top: 0;
+    word-wrap: normal;
   }
 
   code {
@@ -25,25 +31,21 @@
     color: var(--md-code-text);
     font-size: 85%;
     margin: 0;
-    padding: .2em .4em;
+    padding: 0.2em 0.4em;
 
-    >div[class*="cm-"] {
+    > div[class*='cm-'] {
       display: inherit;
     }
   }
 
-  pre {
-    word-wrap: normal
-  }
-
-  pre>code {
+  pre > code {
     background: 0 0;
     border: 0;
     font-size: 100%;
     margin: 0;
     padding: 0;
     white-space: pre;
-    word-break: normal
+    word-break: normal;
   }
 
   pre {
@@ -57,7 +59,7 @@
     font-size: 85%;
     line-height: 1.45;
     overflow: auto;
-    padding: 1em
+    padding: 1em;
   }
 
   pre code.theme-dark {
@@ -74,7 +76,7 @@
     max-width: auto;
     overflow: visible;
     padding: 0;
-    word-wrap: normal
+    word-wrap: normal;
   }
 
   kbd {
@@ -89,89 +91,78 @@
     font-size: 11px;
     line-height: 10px;
     padding: 3px 5px;
-    vertical-align: middle
+    vertical-align: middle;
   }
 }
 
-@mixin copyCodeButton {
+@mixin copy-code-button {
   button.rdmd-code-copy {
-    DISPLAY: none !important; // hide by default
-
-    & {
-      -webkit-appearance: unset;
-      margin: .5em .6em 0 0;
-      padding: .25em .7em;
-      cursor: copy;
-      font: inherit;
-      color: inherit;
-      color: var(--md-code-text, inherit);
-      border: none;
-      border-radius: 3px;
-      outline: none !important;
-      background: inherit;
-      background: var(--md-code-background, inherit);
-      box-shadow:
-        inset 0 0 0 1px rgba(#aaa, .66),
-        -1px 2px 6px -3px rgba(black, .1);
-      transition: .15s ease-out;
-    }
+    appearance: unset;
+    background: inherit;
+    background: var(--md-code-background, inherit);
+    border: none;
+    border-radius: 3px;
+    box-shadow: inset 0 0 0 1px rgba(#aaa, 0.66), -1px 2px 6px -3px rgba(black, 0.1);
+    color: inherit;
+    color: var(--md-code-text, inherit);
+    cursor: copy;
+    display: none !important; // hide by default
+    font: inherit;
+    margin: 0.5em 0.6em 0 0;
+    outline: none !important;
+    padding: 0.25em 0.7em;
+    transition: 0.15s ease-out;
 
     &:not(:hover) {
-
-      &:before,
-      &:after {
-        opacity: .66;
+      &::before,
+      &::after {
+        opacity: 0.66;
       }
     }
 
     &:hover {
       &:not(:active) {
-        box-shadow:
-          inset 0 0 0 1px rgba(#8B8B8B, .75),
-          -1px 2px 6px -3px rgba(black, .2);
+        box-shadow: inset 0 0 0 1px rgba(#8b8b8b, 0.75), -1px 2px 6px -3px rgba(black, 0.2);
       }
     }
 
     &:active {
-      box-shadow:
-        inset 0 0 0 1px rgba(#8B8B8B, .5),
-        inset 1px 4px 6px -2px rgba(0, 0, 0, .175);
+      box-shadow: inset 0 0 0 1px rgba(#8b8b8b, 0.5), inset 1px 4px 6px -2px rgba(0, 0, 0, 17.5%);
 
-      &:before,
-      &:after {
-        opacity: .75;
+      &::before,
+      &::after {
+        opacity: 0.75;
       }
     }
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       display: inline-block;
-      font: normal normal normal 1em/1 "Font Awesome 5 Free", "FontAwesome";
+      font: normal normal normal 1em/1 'Font Awesome 5 Free', FontAwesome;
+      font-family: ReadMe-Icons;
+      font-feature-settings: 'liga';
+      font-variant-ligatures: discretionary-ligatures;
+      line-height: 2;
       text-rendering: auto;
       -webkit-font-smoothing: antialiased;
-
-      line-height: 2;
-      font-family: 'ReadMe-Icons';
-      font-variant-ligatures: discretionary-ligatures;
-      font-feature-settings: "liga";
     }
 
-    &:before {
-      content: "\e6c9";
+    &::before {
+      content: '\e6c9';
       font-weight: 800;
-      transition: .3s .15s ease;
+      transition: 0.3s 0.15s ease;
     }
 
-    &:after {
+    &::after {
       // @todo why are these !important @rafe, you dumbell?
-      content: "\e942" !important;
+      content: '\e942' !important;
       font-weight: 900 !important;
-      position: absolute;
-      top: 50%;
       left: 50%;
-      transform: translate(-50%, -50%) scale(.33);
       opacity: 0 !important;
-      transition: .3s 0s ease;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%) scale(0.33);
+      transition: 0.3s 0s ease;
     }
 
     &_copied {
@@ -184,16 +175,16 @@
         opacity: 1;
       }
 
-      &:before {
-        transition: .3s 0s ease;
-        transform: scale(.33);
+      &::before {
         opacity: 0 !important;
+        transition: 0.3s 0s ease;
+        transform: scale(0.33);
       }
 
-      &:after {
-        transition: .3s .15s ease;
-        transform: translate(-50%, -50%) scale(1);
+      &::after {
         opacity: 1 !important;
+        transition: 0.3s 0.15s ease;
+        transform: translate(-50%, -50%) scale(1);
       }
     }
   }
@@ -201,11 +192,11 @@
   pre {
     position: relative;
 
-    >code {
+    > code {
       background: inherit;
     }
 
-    >code.theme-dark {
+    > code.theme-dark {
       color: white;
     }
 
@@ -221,7 +212,7 @@
       overflow: hidden;
       padding: 0;
 
-      >code {
+      > code {
         display: block !important;
         overflow: auto;
         padding: 1em;
@@ -232,7 +223,7 @@
     // manage copied state style
     & {
       &:hover button.rdmd-code-copy:not(:hover) {
-        transition-delay: .4s;
+        transition-delay: 0.4s;
       }
 
       &:not(:hover) button.rdmd-code-copy:not(.rdmd-code-copy_copied) {
@@ -243,7 +234,7 @@
 }
 
 .markdown-body {
-  // --md-code-background: #F6F8FA;  
-  @include gfmCodeBaseStyles;
-  @include copyCodeButton;
+  // --md-code-background: #F6F8FA;
+  @include gfm-code-base-styles;
+  @include copy-code-button;
 }

package/components/CodeTabs/style.scss

@@ -1,21 +1,24 @@
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable declaration-property-value-disallowed-list */
 @import '~codemirror/lib/codemirror.css';
 @import '~codemirror/theme/neo.css';
 
-@mixin CodeTabs {
-  $bgc-pre: #F6F8FA;
-  $bgc-pre-dark: #242E34;
+@mixin code-tabs {
+  $bgc-pre: #f6f8fa;
+  $bgc-pre-dark: #242e34;
   $bgc-bar: darken(desaturate($bgc-pre, 17.46), 4.31);
   $bgc-bar-dark: lighten(desaturate($bgc-pre-dark, 17.46), 4.31);
   $radius: var(--md-code-radius, var(--markdown-radius, 3px));
 
+  border-radius: $radius !important;
   color: #333;
   color: var(--md-code-text, #333);
-  border-radius: $radius !important;
   overflow: hidden;
 
   &.theme-dark {
     color: white;
     color: var(--md-code-text, white);
+
     .CodeTabs-toolbar {
       background: $bgc-bar-dark;
       background: var(--md-code-tabs, $bgc-bar-dark);
@@ -28,27 +31,28 @@
     display: flex;
     flex-flow: row nowrap;
     overflow: hidden;
-    overflow-x: auto;
-    -ms-overflow-style: none;
     -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: none;
+    overflow-x: auto;
+
     &::-webkit-scrollbar {
       display: none;
     }
+
     button {
-      white-space: nowrap;
-      transition: .123s ease;
-      -webkit-appearance: none;
       appearance: none;
-      display: inline-block;
-      line-height: 2;
-      padding: .5em 1em;
-      border: none;
       background: transparent;
-      outline: none;
+      border: none;
       color: inherit;
-      font: inherit;
-      font-size: .75em;
       cursor: pointer;
+      display: inline-block;
+      font: inherit;
+      font-size: 0.75em;
+      line-height: 2;
+      outline: none;
+      padding: 0.5em 1em;
+      transition: 0.123s ease;
+      white-space: nowrap;
     }
   }
 
@@ -70,15 +74,17 @@
   }
 
   &-toolbar button:not(.CodeTabs_active):hover {
-    background: rgba(0, 0, 0, .075);
+    background: rgba(0, 0, 0, 7.5%);
   }
 
   pre {
-    border-radius: 0 0 $radius $radius !important;
-    background: $bgc-pre;
     background: var(--md-code-background, $bgc-pre);
+    border-radius: 0 0 $radius $radius !important;
     margin-bottom: 0;
-    &:not(.CodeTabs_active) { display: none }
+
+    &:not(.CodeTabs_active) {
+      display: none;
+    }
   }
 
   &.theme-dark pre {
@@ -92,5 +98,5 @@
 }
 
 .CodeTabs {
-  @include CodeTabs;
+  @include code-tabs;
 }