Skip to content

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

Допилил бургер и off-canvas

parent ffbaa53e
Show whitespace changes
Inline Side-by-side
Showing with 54 additions and 99 deletions
.yaspellerrc
View file @ 12d6d9cd
......@@ -41,6 +41,7 @@
"com",
"ru",
"svg",
"SVG",
"tbody",
"tfoot",
"thead",
......
src/blocks-demo.html
View file @ 12d6d9cd
......@@ -35,9 +35,7 @@
<div class="off-canvas" id="off-canvas">
<div class="off-canvas__aside">
1111
<br>
222
<ul class="menu" id="off-canvas-menu"></ul>
</div>
<div class="components-demo blocks-library off-canvas__page-content">
......@@ -280,7 +278,7 @@
<section class="blocks-library__item" id="sprite-svg" data-name=".sprite-svg">
<h2 class="blocks-library__item-title">svg-спрайт c <a href="https://github.com/w0rm/gulp-svgstore">gulp-svgstore</a></h2>
<h2 class="blocks-library__item-title">SVG-спрайт c <a href="https://github.com/w0rm/gulp-svgstore">gulp-svgstore</a></h2>
<p>Из файлов папки <code>sprite-svg/svg/</code> в папку <code>sprite-svg/img/</code> будет сгенерирован файл спрайта <code>sprite-svg.svg</code>, который далее будет скопирован в папку сборки. Стилевой файл блока не используется. Сам спрайт имеет вид:</p>
......@@ -1702,7 +1700,7 @@
</section>
<section class="blocks-library__item" id="off-canvas" data-name=".off-canvas">
<section class="blocks-library__item" id="off-canvas-demo" data-name=".off-canvas">
<h2 class="blocks-library__item-title">Боковое меню</h2>
......@@ -1727,6 +1725,8 @@
</section>
<div class="burger blocks-library__menu-toggler" data-toggle="off-canvas"><span data-toggle="off-canvas"></span></div>
</div>
<div class="off-canvas__overlay" data-toggle="off-canvas"></div>
......@@ -1785,6 +1785,14 @@
demoNoUiSlider.noUiSlider.set([this.value, null]);
});
var demoBlocks = document.querySelectorAll('.blocks-library__item');
var offCanvasMenu = '';
demoBlocks.forEach(function(block) {
offCanvasMenu += '<li class="menu__item"><a class="menu__link" data-toggle-native="off-canvas" href="#'+block.getAttribute('id')+'">'+block.querySelector('.blocks-library__item-title').textContent+'</a></li>';
});
var offCanvasMenuContent = document.getElementById('off-canvas-menu');
offCanvasMenuContent.innerHTML = offCanvasMenu;
});
</script>
</body>
......
src/blocks/burger/burger.scss
View file @ 12d6d9cd
......@@ -5,8 +5,6 @@
.burger {
position: relative;
z-index: 1;
top: 0;
right: 0;
display: flex;
align-items: center;
width: 30px;
......
src/blocks/menu/menu.scss
View file @ 12d6d9cd
......@@ -2,8 +2,6 @@
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
$gray-lightest: hsl(0, 0%, 90%) !default;
$text-color: hsl(0, 0%, 10%) !default;
$border-color: hsl(0, 0%, 60%) !default;
......@@ -37,8 +35,6 @@ $border-color: hsl(0, 0%, 60%) !default;
text-decoration: none;
&:hover,
&:focus {
background-color: $gray-lightest;
}
&:focus {}
}
}
src/blocks/off-canvas/off-canvas.js
View file @ 12d6d9cd
document.addEventListener('click', function(event) {
if(event.target.dataset.toggle === 'off-canvas') {
event.preventDefault();
offCanvasToggle();
}
if(event.target.dataset.toggleNative === 'off-canvas') {
offCanvasToggle();
}
function offCanvasToggle() {
document.getElementById('off-canvas').classList.toggle('off-canvas--open');
}
});
src/blocks/off-canvas/off-canvas.scss
View file @ 12d6d9cd
......@@ -9,6 +9,10 @@ $transition-time: 0.3s !default;
$toggler-part-height: 3px !default;
// Переменная ширины этого блока
//
$off-canvas-width: 250px !default;
.off-canvas {
$block-name: &;
......@@ -17,16 +21,22 @@ $toggler-part-height: 3px !default;
overflow: hidden;
&__aside {
position: fixed;
z-index: 2;
width: 250px;
height: 100%;
max-height: 30vh;
overflow-y: auto;
backface-visibility: hidden;
background-color: $gray-darkest;
color: #fff;
transform: translateX(-250px);
transition: transform $transition-time ease;
.js & {
position: fixed;
z-index: 2;
width: $off-canvas-width;
height: 100%;
max-height: none;
transform: translateX(($off-canvas-width * -1));
}
a {
color: #fff;
......@@ -37,57 +47,6 @@ $toggler-part-height: 3px !default;
}
}
&__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;
......@@ -100,7 +59,6 @@ $toggler-part-height: 3px !default;
left: 0;
width: 100%;
height: 100%;
// transition: opacity $transition-time ease;
background: rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
......@@ -108,7 +66,7 @@ $toggler-part-height: 3px !default;
&--open {
.js &--open {
#{$block-name}__overlay {
position: fixed;
......@@ -129,7 +87,7 @@ $toggler-part-height: 3px !default;
}
#{$block-name}__page-content {
transform: translateX(250px);
transform: translateX($off-canvas-width);
}
}
}
src/scss/blocks-library.scss
View file @ 12d6d9cd
......@@ -111,36 +111,24 @@
}
}
.js-font-resizer {
position: relative;
@media (min-width: $screen-md) {
&:hover {
.js-font-resizer__btns {
opacity: 1;
}
}
}
}
.js-font-resizer__btns {
margin-bottom: 1em;
font-size: 2rem;
transition: opacity 0.3s;
&__menu-toggler {
position: fixed;
backface-visibility: hidden;
bottom: 0;
left: 0;
background-color: #000;
width: 40px;
height: 40px;
padding: 5px;
@media (min-width: $screen-md) {
opacity: 0.2;
position: absolute;
top: 0;
left: -4rem;
width: 4rem;
.off-canvas--open & {
display: none;
}
.btn {
width: 3rem;
text-align: center;
& > span,
& > span:before,
& > span:after {
background-color: #fff;
}
}
}
......
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