Добавил кастомный скролл с baron

src/blocks-demo.pug

@@ -853,10 +853,16 @@ block content
     +block-lib-code()
       include:show-code(first-line='//- Pug-файл этого блока:') blocks/tabs/tabs.pug
 
-  +block-lib('baron', 'Кастомный скролл с baron', false)
+  +block-lib('baron', 'Кастомный скролл с <a href="https://www.npmjs.com/package/baron">baron</a>', false)
     include:markdown-it(linkify, html='true', typographer='true', quotes='«»') blocks/baron/readme.md
-    +baron('some-mod')(style='width:200px; height: 100px; border: 1px solid #E6E6E6')
+    +baron('block-demo')(style='height: 100px; border: 1px solid #E6E6E6; margin-bottom: 1rem;')
       p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta aliquid nemo, sit possimus, eveniet tempore minus, doloremque incidunt, nihil quos aperiam ab iure quia. Ipsa sit porro incidunt, sed!
+      p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta aliquid nemo, sit possimus, eveniet tempore minus, doloremque incidunt, nihil quos aperiam ab iure quia. Ipsa sit porro incidunt, sed!
+      p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta aliquid nemo, sit possimus, eveniet tempore minus, doloremque incidunt, nihil quos aperiam ab iure quia. Ipsa sit porro incidunt, sed!
+      p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta aliquid nemo, sit possimus, eveniet tempore minus, doloremque incidunt, nihil quos aperiam ab iure quia. Ipsa sit porro incidunt, sed!
+      p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta aliquid nemo, sit possimus, eveniet tempore minus, doloremque incidunt, nihil quos aperiam ab iure quia. Ipsa sit porro incidunt, sed!
+    +block-lib-code()
+      include:show-code(first-line='//- Pug-файл этого блока:') blocks/baron/baron.pug
 
 
   .burger.blocks-library__menu-toggler(data-toggle='off-canvas')

src/blocks/baron/baron.js

 document.addEventListener('DOMContentLoaded', function(){
 
-  // baron('.blocks-demo-custom-scroll');
-
   baron({
-    root: '.baron',
+    root: '.baron', // Блок, в котором будет кастомный скролл
     scroller: '.baron__scroller',
     bar: '.baron__bar',
     scrollingCls: 'baron--scrolling',
-    draggingCls: 'baron--dragging'
+    draggingCls: 'baron--dragging',
+    barOnCls: 'baron--scrollbar',
   });
 
 });

src/blocks/baron/baron.pug

 //- Блок для кастомного скролла baron: https://github.com/Diokuz/baron
 //- Нуждается в соотв. зависимости: https://www.npmjs.com/package/baron
-//- (должна быть указана в ./projectConfig.json)
+//- (должна быть указана в ./projectConfig.json, есть по умолчанию)
+//- ВНИМАНИЕ! Помимо вызова примеси, нужно включить baron на блоке! см. blocks/baron/baron.js
 
-mixin baron(mods)
+mixin baron(mods, tag)
 
   //- Принимает:
   //-   mods    {string} - список модификаторов
+  //-   tag     {string} - тег
   //- Вызов:
         +baron('some-mod')(style='width:100px; height: 100px')
           p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta aliquid nemo, sit possimus, eveniet tempore minus, doloremque incidunt, nihil quos aperiam ab iure quia. Ipsa sit porro incidunt, sed!
+        .some-block
+          +baron('', 'section')(class='some-block__demo')
+            p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta aliquid nemo, sit possimus, eveniet tempore minus, doloremque incidunt, nihil quos aperiam ab iure quia. Ipsa sit porro incidunt, sed!
 
   -
     // список модификаторов
@@ -19,13 +24,16 @@ mixin baron(mods)
         allMods = allMods + ' baron--' + modsList[i].trim();
       }
     }
+    var parentTag = 'div';
+    if(typeof(tag) !== 'undefined' && tag) {
+      parentTag = tag;
+    }
 
-  // ._ubuntu12
-  .baron.baron__clipper(class=allMods)&attributes(attributes)
+  #{parentTag}.baron(class=allMods)&attributes(attributes)
     .baron__scroller
       block
     .baron__track
-      //- .baron__control.baron__up ▲ // В оставленной теме оформления не используется
+      //- .baron__control.baron__up ▲
       .baron__free
         .baron__bar
-      //- .baron__control.baron__down ▼ // В оставленной теме оформления не используется
+      //- .baron__control.baron__down ▼

src/blocks/baron/baron.scss

@@ -9,10 +9,8 @@
 
   $scrollbar-width:           14px;
 
-  &__clipper {
   position: relative;
   overflow: hidden;
-  }
 
   &__scroller {
     overflow-y: scroll;
@@ -41,7 +39,7 @@
     width: $scrollbar-width;
     background-color: $gray-lightest;
 
-    #{$block-name}._scrollbar & {
+    #{$block-name}--scrollbar & {
       opacity: 1;
     }
   }
@@ -64,7 +62,7 @@
     pointer-events: auto;
     background: $gray-lighten;
 
-    #{$block-name}._scrollbar & {
+    #{$block-name}--scrollbar & {
       display: block;
     }
 

src/blocks/baron/readme.md

-Кастомный скролл c [baron](https://www.npmjs.com/package/baron) (зависимость берётся в сборку по умолчанию). [Демо кастомного скролла](http://diokuz.github.io/baron/). [Как использовать](https://github.com/Diokuz/baron#1-hiding-system-scrollbar).
+Кастомный скролл c [baron](https://www.npmjs.com/package/baron) (зависимость берётся в сборку по умолчанию). [Демо кастомного скролла](http://diokuz.github.io/baron/)..
 
-Включать кастомный скролл — в `baron/baron.js`. Стили берутся из `baron/baron.scss`, оставлена одна тема оформления (используется по умолчанию). См. [стилизацию оригинальных тем](https://github.com/Diokuz/baron/blob/master/skins/styles.css).
+Кастомный скролл включён для всех  тегов с классом `.baron` в `blocks/baron/baron.js`. Стили берутся из `blocks/baron/baron.scss`, оставлена одна тема оформления (используется по умолчанию). См. [стилизацию оригинальных тем](https://github.com/Diokuz/baron/blob/master/skins/styles.css).

src/blocks/code/code.scss

@@ -13,7 +13,7 @@ $border-radius:               rem(3px) !default;
 
   display: block;
   width: 100%;
-  max-height: 50rem;
+  max-height: rem(500px);
   padding: 0.5rem 1rem;
   margin-bottom: 1rem;
   overflow-x: auto;

src/scss/blocks-library.scss

@@ -114,7 +114,7 @@
     }
 
     pre {
-      max-height: 500px;
+      max-height: 800px;
     }
   }