Commit c38c4263 authored by Nikolay Gromov's avatar Nikolay Gromov

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

parent ddf94298
......@@ -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')
......
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',
});
});
//- Блок для кастомного скролла 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 ▼
......@@ -9,10 +9,8 @@
$scrollbar-width: 14px;
&__clipper {
position: relative;
overflow: hidden;
}
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;
}
......
Кастомный скролл 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).
......@@ -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;
......
......@@ -114,7 +114,7 @@
}
pre {
max-height: 500px;
max-height: 800px;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment