Skip to content

K
kpp
Commit ddf94298 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Добавления

parent 1eacfff3
Hide whitespace changes
Inline Side-by-side
Showing with 199 additions and 3 deletions
package.json
View file @ ddf94298
......@@ -77,6 +77,7 @@
"vinyl-buffer": "^1.0.0"
},
"dependencies": {
"baron": "^3.0.3",
"ismobilejs": "^0.4.0",
"jquery": "^3.1.1",
"jquery-migrate": "^3.0.0",
......
projectConfig.json
View file @ ddf94298
......@@ -58,7 +58,9 @@
"off-canvas": [],
"modal": [],
"tabs": [],
"object-fit-polyfill": []
"object-fit-polyfill": [],
"or": [],
"baron": []
},
"addCssBefore": [
"./src/scss/functions.scss",
......@@ -81,7 +83,8 @@
"./node_modules/owl.carousel/dist/owl.carousel.js",
"./node_modules/swipejs/build/swipe.min.js",
"./node_modules/nouislider/distribute/nouislider.js",
"./node_modules/object-fit-images/dist/ofi.js"
"./node_modules/object-fit-images/dist/ofi.js",
"./node_modules/baron/baron.min.js"
],
"addJsAfter": [
"./src/js/global-script.js"
......
src/blocks-demo.pug
View file @ ddf94298
......@@ -200,6 +200,13 @@ block content
+block-lib-code('burger-code', true)
include:show-code(first-line='//- Pug-файл этого блока:') blocks/burger/burger.pug
+block-lib('or', 'Разеделитель «или»', false)
include:markdown-it(linkify, html='true', typographer='true', quotes='«»') blocks/or/readme.md
+or()
+or('Текст взамен «или»', 'some-mod')
+block-lib-code()
include:show-code(first-line='//- Pug-файл этого блока:') blocks/or/or.pug
+block-lib('code', 'Код', false)
include:markdown-it(linkify, html='true', typographer='true', quotes='«»') blocks/code/readme.md
+code()
......@@ -846,6 +853,11 @@ block content
+block-lib-code()
include:show-code(first-line='//- Pug-файл этого блока:') blocks/tabs/tabs.pug
+block-lib('baron', 'Кастомный скролл с baron', 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')
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!
.burger.blocks-library__menu-toggler(data-toggle='off-canvas')
span(data-toggle='off-canvas')
......
src/blocks/baron/baron.js 0 → 100644
View file @ ddf94298
document.addEventListener('DOMContentLoaded', function(){
// baron('.blocks-demo-custom-scroll');
baron({
root: '.baron',
scroller: '.baron__scroller',
bar: '.baron__bar',
scrollingCls: 'baron--scrolling',
draggingCls: 'baron--dragging'
});
});
src/blocks/baron/baron.pug 0 → 100644
View file @ ddf94298
//- Блок для кастомного скролла baron: https://github.com/Diokuz/baron
//- Нуждается в соотв. зависимости: https://www.npmjs.com/package/baron
//- (должна быть указана в ./projectConfig.json)
mixin baron(mods)
//- Принимает:
//- mods {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!
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' baron--' + modsList[i].trim();
}
}
// ._ubuntu12
.baron.baron__clipper(class=allMods)&attributes(attributes)
.baron__scroller
block
.baron__track
//- .baron__control.baron__up ▲ // В оставленной теме оформления не используется
.baron__free
.baron__bar
//- .baron__control.baron__down ▼ // В оставленной теме оформления не используется
src/blocks/baron/baron.scss 0 → 100644
View file @ ddf94298
// В этом файле должны быть стили для БЭМ-блока baron, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Оригинальные темы оформления: https://github.com/Diokuz/baron/blob/master/skins/styles.css
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.baron {
$block-name: &; // #{$block-name}__element
$scrollbar-width: 14px;
&__clipper {
position: relative;
overflow: hidden;
}
&__scroller {
overflow-y: scroll;
box-sizing: border-box;
margin: 0;
border: 0;
padding: 0;
padding-right: $scrollbar-width;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch; // remove line to customize scrollbar in iOs
&::-webkit-scrollbar {
width: 0;
height: 0;
}
}
&__track {
opacity: 0;
position: absolute;
z-index: 3;
top: 0;
bottom: 0;
right: 0;
width: $scrollbar-width;
background-color: $gray-lightest;
#{$block-name}._scrollbar & {
opacity: 1;
}
}
&__free {
position: absolute;
top: 0;
bottom: 0;
right: 0;
}
&__bar {
display: none;
position: absolute;
left: ($scrollbar-width * -1 + 1);
z-index: 1;
width: ($scrollbar-width - 2);
box-sizing: border-box;
opacity: 1;
pointer-events: auto;
background: $gray-lighten;
#{$block-name}._scrollbar & {
display: block;
}
#{$block-name}--dragging &,
&:hover {
background-color: $gray-light;
}
}
&__control {
display: none;
}
}
src/blocks/baron/readme.md 0 → 100644
View file @ ddf94298
Кастомный скролл c [baron](https://www.npmjs.com/package/baron) (зависимость берётся в сборку по умолчанию). [Демо кастомного скролла](http://diokuz.github.io/baron/). [Как использовать](https://github.com/Diokuz/baron#1-hiding-system-scrollbar).
Включать кастомный скролл — в `baron/baron.js`. Стили берутся из `baron/baron.scss`, оставлена одна тема оформления (используется по умолчанию). См. [стилизацию оригинальных тем](https://github.com/Diokuz/baron/blob/master/skins/styles.css).
src/blocks/or/or.pug 0 → 100644
View file @ ddf94298
//- Все примеси в этом файле должны начинаться c имени блока (or)
mixin or(text, mods)
//- Принимает:
//- text {string} - текст
//- mods {string} - список модификаторов
//- Вызов:
+or('Текст', 'some-mod')
-
// список модификаторов
var allMods = '';
if(typeof(mods) !== 'undefined' && mods) {
var modsList = mods.split(',');
for (var i = 0; i < modsList.length; i++) {
allMods = allMods + ' or--' + modsList[i].trim();
}
}
if(typeof(text) === 'undefined')
text = 'или'
.or(class=allMods)&attributes(attributes)
.or__inner!= text
src/blocks/or/or.scss 0 → 100644
View file @ ddf94298
// В этом файле должны быть стили для БЭМ-блока or, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority
.or {
$block-name: &; // #{$block-name}__element
display: flex;
align-items: center;
&:before,
&:after {
content: '';
flex-grow: 1;
height: 1px;
background-color: $gray-light;
}
&__inner {
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: $font-size--small;
color: $gray-light;
}
}
src/blocks/or/readme.md 0 → 100644
View file @ ddf94298
Разделитель «или» с горизонтальными линиями.
src/blocks/to-top/to-top.scss
View file @ ddf94298
......@@ -11,7 +11,7 @@ $transition-time: 0.3s !default;
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 1;
z-index: 99;
width: 3rem;
height: 3rem;
border-radius: 50%;
......
src/pug/mixins.pug
View file @ ddf94298
......@@ -48,3 +48,5 @@ include ../blocks/off-canvas/off-canvas.pug
include ../blocks/modal/modal.pug
include ../blocks/tabs/tabs.pug
include ../blocks/object-fit-polyfill/object-fit-polyfill.pug
include ../blocks/or/or.pug
include ../blocks/baron/baron.pug
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