Skip to content

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

Добавил burger, off-canvas

parent 2213f402
Hide whitespace changes
Inline Side-by-side
Showing with 310 additions and 89 deletions
.yaspellerrc
View file @ d56b1df7
......@@ -21,6 +21,7 @@
"селект*",
"чекбокс*",
"псевдоселектор*",
"бургер*",
"псевдоэлемент*",
"коммит*",
"пиксел*",
......
projectConfig.json
View file @ d56b1df7
......@@ -46,7 +46,9 @@
"swipe": [],
"pagination": [],
"breadcrumbs": [],
"nouislider": []
"nouislider": [],
"off-canvas": [],
"burger": []
},
"addCssBefore": [
"./src/scss/variables.scss",
......@@ -82,4 +84,4 @@
"buildPath": "./build/",
"blocksDirName": "blocks"
}
}
}
\ No newline at end of file
src/blocks-demo.html
View file @ d56b1df7
......@@ -26,31 +26,24 @@
});
}
// Изменение размера шрифта на произвольном блоке
var parent, fontSizeEm;
$('.js-font-resizer')
.css('font-size', '1em')
.append('<div class="js-font-resizer__btns"><button class="btn btn--sm js-button-plus">+</button><button class="btn btn--sm js-button-null">0</button><button class="btn btn--sm js-button-minus">-</button></div>')
.on('click', 'button.js-button-plus', function(){
parent = $(this).closest('.js-font-resizer');
fontSizeEm = /(\d*\.?\d?)(em)/g.exec(parent.attr('style'));
parent.css('font-size', parent.css('font-size', parseFloat(fontSizeEm[0], 10) + 0.1 + 'em') );
}).on('click', 'button.js-button-minus', function(){
parent = $(this).closest('.js-font-resizer');
fontSizeEm = /(\d*\.?\d?)(em)/g.exec(parent.attr('style'));
parent.css('font-size', parent.css('font-size', parseFloat(fontSizeEm[0], 10) - 0.1 + 'em') );
}).on('click', 'button.js-button-null', function(){
parent = $(this).closest('.js-font-resizer');
parent.css('font-size', '1em' );
});
});
</script>
</head>
<body>
<div class="components-demo blocks-library">
<div class="off-canvas" id="off-canvas">
<div class="off-canvas__aside">
<div class="off-canvas__aside-inner">
1111
<br>
222
</div>
<div class="off-canvas__close"><span data-toggle="off-canvas"></span></div>
</div>
<div class="components-demo blocks-library off-canvas__page-content">
<h1>Страница демонстрации блоков, доступных на <a href="index.html">проекте</a></h1>
......@@ -274,7 +267,7 @@
</div>
</div>
<pre>// Блочный код с символом переноса строки
// Вторая строка</pre>
// Вторая строка</pre>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
......@@ -334,6 +327,27 @@
</section>
<section class="blocks-library__item" id="burger" data-name=".burger">
<h2 class="blocks-library__item-title">Бургер</h2>
<p>Анимированное превращение в крестик по добавлению модификатора.</p>
<div class="burger"><span></span></div>
<div class="burger burger--close"><span></span></div>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code">
<code>&lt;div class="burger">&lt;span>&lt;/span>&lt;/div></code>
<code>&lt;div class="burger burger--close">&lt;span>&lt;/span>&lt;/div></code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="main-nav-block" data-name=".main-nav">
<h2 class="blocks-library__item-title">Главная навигация</h2>
......@@ -341,7 +355,7 @@
<p>Демонстрационный контент блока:</p>
<nav id="main-nav" class="main-nav">
<div id="main-nav-toggler" class="main-nav__toggler"><span></span></div>
<div id="main-nav-toggler" class="main-nav__toggler burger"><span></span></div>
<ul class="main-nav__list">
<li class="main-nav__item main-nav__item--active">
<a href="" class="main-nav__link">
......@@ -394,7 +408,7 @@
<div class="blocks-library__code">
<pre class="code">
<code>&lt;nav id="main-nav" class="main-nav"></code>
<code> &lt;div id="main-nav-toggler" class="main-nav__toggler">&lt;span>&lt;/span>&lt;/div></code>
<code> &lt;div id="main-nav-toggler" class="main-nav__toggler burger">&lt;span>&lt;/span>&lt;/div></code>
<code> &lt;ul class="main-nav__list"></code>
<code> &lt;li class="main-nav__item main-nav__item--active"></code>
<code> &lt;a href="" class="main-nav__link"></code>
......@@ -1691,8 +1705,40 @@
</section>
<section class="blocks-library__item" id="off-canvas" data-name=".off-canvas">
<h2 class="blocks-library__item-title">Боковое меню</h2>
<p>Простейший компонент, 3 строчки JavaScript. Меню показывается по клику на любой элемент с <code>data-toggle="off-canvas"</code>.</p>
<button class="btn" type="button" data-toggle="off-canvas">Показать боковое меню</button>
<a href="#" data-toggle="off-canvas">Показать боковое меню</a>
<span data-toggle="off-canvas">Показать боковое меню</span>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code">
<code>&lt;div class="off-canvas" id="off-canvas"></code>
<code> &lt;div class="off-canvas__aside"></code>
<code> &lt;div class="off-canvas__aside-inner">...&lt;/div></code>
<code> &lt;div class="off-canvas__close">&lt;span data-toggle="off-canvas">&lt;/span>&lt;/div></code>
<code> &lt;/div></code>
<code> &lt;div class="off-canvas__page-content">...&lt;/div></code>
<code> &lt;div class="off-canvas__overlay" data-toggle="off-canvas">&lt;/div></code>
<code>&lt;/div></code>
</pre>
</div>
</div>
</section>
</div>
<div class="off-canvas__overlay" data-toggle="off-canvas"></div>
</div>
<a href="#" class="to-top" id="toTop">↑</a>
@@include('_include/page_bottom.html')
......
src/blocks/burger/burger.html 0 → 100644
View file @ d56b1df7
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/burger/burger.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="burger"><span></span></div>
src/blocks/burger/burger.scss 0 → 100644
View file @ d56b1df7
// В этом файле должны быть стили только для БЭМ-блока burger, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
.burger {
position: relative;
z-index: 1;
top: 0;
right: 0;
display: flex;
align-items: center;
width: 30px;
height: 30px;
user-select: none;
cursor: pointer;
> span {
display: inline-block;
width: 100%;
height: $toggler-part-height;
background: $toggler-part-bg-color;
position: relative;
transition: background 0.3s 0.3s;
&:before,
&:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: $toggler-part-height;
background: $toggler-part-bg-color;
transform-origin: 50% 50%;
transition: top 0.3s 0.3s, transform 0.3s;
}
&:before {
top: -10px;
}
&:after {
top: 10px;
}
}
&--close {
> span {
transition: background 0.2s 0s;
background: transparent;
&:before,
&:after {
transition: top 0.3s, transform 0.3s 0.3s;
top: 0;
}
&:before {
transform: rotate3d(0, 0, 1, 45deg);
}
&:after {
transform: rotate3d(0, 0, 1, -45deg);
}
}
}
}
src/blocks/main-nav/main-nav.js
View file @ d56b1df7
......@@ -7,7 +7,7 @@
function mainNavVisibleToggle(e) {
e.preventDefault();
toggler.classList.toggle('main-nav__toggler--close');
toggler.classList.toggle('burger--close');
document.getElementById('main-nav').classList.toggle('main-nav--open');
}
}
......
src/blocks/main-nav/main-nav.scss
View file @ d56b1df7
......@@ -9,8 +9,6 @@ $screen-lg: 992px !default;
$screen-xl: 1200px !default;
$screen-xxl: 1800px !default;
// специфические для этого блока переменные:
$menu-desktop-width: $screen-xl !default;
$toggler-part-height: 3px !default;
$toggler-part-bg-color: #000 !default;
......@@ -172,16 +170,6 @@ $toggler-part-bg-color: #000 !default;
// переключатель
&__toggler {
position: relative;
z-index: 1;
top: 0;
right: 0;
display: flex;
align-items: center;
width: 30px;
height: 30px;
user-select: none;
cursor: pointer;
.no-js & {
display: none;
......@@ -190,57 +178,5 @@ $toggler-part-bg-color: #000 !default;
@media (min-width: $menu-desktop-width) {
display: none;
}
> span {
display: inline-block;
vertical-align: bottom;
width: 100%;
height: $toggler-part-height;
background: $toggler-part-bg-color;
position: relative;
transition: background 0.3s 0.3s;
&:before,
&:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: $toggler-part-height;
background: $toggler-part-bg-color;
transform-origin: 50% 50%;
transition: top 0.3s 0.3s, transform 0.3s;
}
&:before {
top: -10px;
}
&:after {
top: 10px;
}
}
&--close {
> span {
transition: background 0.2s 0s;
background: transparent;
&:before,
&:after {
transition: top 0.3s, transform 0.3s 0.3s;
top: 0;
}
&:before {
transform: rotate3d(0, 0, 1, 45deg);
}
&:after {
transform: rotate3d(0, 0, 1, -45deg);
}
}
}
}
}
src/blocks/off-canvas/off-canvas.html 0 → 100644
View file @ d56b1df7
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/off-canvas/off-canvas.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="off-canvas">content</div>
src/blocks/off-canvas/off-canvas.js 0 → 100644
View file @ d56b1df7
document.addEventListener('click', function(event) {
event.preventDefault();
if(event.target.dataset.toggle === 'off-canvas') {
document.getElementById('off-canvas').classList.toggle('off-canvas--open');
}
});
src/blocks/off-canvas/off-canvas.scss 0 → 100644
View file @ d56b1df7
// В этом файле должны быть стили только для БЭМ-блока off-canvas, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
$gray-darkest: hsl(0, 0%, 10%);
$opacity: 0.7 !default;
$transition-time: 0.3s !default;
$toggler-part-height: 3px !default;
.off-canvas {
$block-name: &;
position: relative;
overflow: hidden;
&__aside {
position: fixed;
z-index: 2;
width: 250px;
height: 100%;
backface-visibility: hidden;
background-color: $gray-darkest;
color: #fff;
transform: translateX(-250px);
transition: transform $transition-time ease;
a {
color: #fff;
&:hover,
&:focus {
color: #fff;
}
}
}
&__aside-inner {
overflow-y: auto;
}
&__close {
position: absolute;
top: 0;
left: 100%;
background-color: $gray-darkest;
opacity: 0;
visibility: hidden;
z-index: -1;
display: flex;
align-items: center;
width: 30px;
height: 30px;
user-select: none;
cursor: pointer;
transition: opacity $transition-time ease;
.no-js & {
display: none;
}
> span {
width: 100%;
height: 100%;
position: relative;
&:before,
&:after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: $toggler-part-height;
background: #fff;
transform-origin: 50% 50%;
}
&:before {
transform: translateY(-50%) rotate3d(0, 0, 1, 45deg);
}
&:after {
transform: translateY(-50%) rotate3d(0, 0, 1, -45deg);
}
}
}
&__page-content {
backface-visibility: hidden;
transition: transform $transition-time ease;
}
&__overlay {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
// transition: opacity $transition-time ease;
background: rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
}
&--open {
#{$block-name}__overlay {
position: fixed;
z-index: 1;
opacity: 1;
visibility: visible;
transition: opacity $transition-time ease;
}
#{$block-name}__close {
z-index: 1;
opacity: 1;
visibility: visible;
}
#{$block-name}__aside {
transform: translateX(0);
}
#{$block-name}__page-content {
transform: translateX(250px);
}
}
}
src/scss/variables.scss
View file @ d56b1df7
......@@ -85,3 +85,7 @@ $border-radius: 3px;
$opacity: 0.7;
$transition-time: 0.3s;
$shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3);
$menu-desktop-width: $screen-xl;
$toggler-part-height: 3px;
$toggler-part-bg-color: #000;
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