Skip to content

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

Поправил компоненты, добавил progress

parent a04f2b63
Hide whitespace changes
Inline Side-by-side
Showing with 129 additions and 76 deletions
.csscomb.json deleted 100644 → 0
View file @ a04f2b63
{
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": false,
"element-case": "lower",
"eof-newline": true,
"leading-zero": true,
"quotes": "single",
"space-before-colon": "",
"space-after-colon": " ",
"space-before-combinator": " ",
"space-after-combinator": " ",
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": "\n",
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"strip-spaces": true,
"tab-size": true,
"unitless-zero": true
}
projectConfig.json
View file @ d865ac41
......@@ -48,7 +48,8 @@
"breadcrumbs": [],
"nouislider": [],
"off-canvas": [],
"burger": []
"burger": [],
"progress": []
},
"addCssBefore": [
"./src/scss/variables.scss",
......@@ -85,4 +86,4 @@
"buildPath": "./build/",
"blocksDirName": "blocks"
}
}
}
\ No newline at end of file
src/blocks-demo.html
View file @ d865ac41
......@@ -14,6 +14,10 @@
max-width: 1200px;
font-family: sans-serif;
}
.off-canvas__aside {
padding-top: 1em;
padding-bottom: 1em;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
......@@ -77,27 +81,7 @@
</div>
</section>
<section class="blocks-library__item" id="is-mobile" data-name=".is-mobile">
<h2 class="blocks-library__item-title">Определение мобильного устройства</h2>
<p class="alert alert--warning">Зависимость от <a href="https://github.com/kaimallea/isMobile">isMobile</a>. Последний должен быть включен в сборку (есть по умолчанию) или подключен к странице иным образом.</p>
<p>JavaScript, добавляющий на <code>&lt;html></code> класс <code>is-mobile</code>, если страница открыта с мобильного устройства. Так же, добавляются модификаторы блока с указанием типа устройства и производителя.</p>
<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;html class="is-mobile is-mobile--android-phone is-mobile--android-device is-mobile--phone"></code>
<code> ...</code>
<code>&lt;/html></code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="text">
<section class="blocks-library__item blocks-library__item--menusep" id="text">
<h2 class="blocks-library__item-title" id="text-text">Текст, теги</h2>
......@@ -307,7 +291,7 @@
</section>
<section class="blocks-library__item" id="sprite-png" data-name=".sprite-png">
<section class="blocks-library__item blocks-library__item--menusep" id="sprite-png" data-name=".sprite-png">
<h2 class="blocks-library__item-title">PNG-спрайт с <a href="https://github.com/Ensighten/spritesmith">spritesmith</a></h2>
......@@ -549,25 +533,6 @@
</section>
<section class="blocks-library__item" id="to-top" data-name=".to-top">
<h2 class="blocks-library__item-title">Кнопка скролла вверх</h2>
<p>Кнопка появляется, если вертикальный скролл более 900 пикс.</p>
<p class="alert alert--warning">Зависит от <a href="https://jquery.com/">jQuery</a> (включен в сборку по умолчанию).</p>
<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;a href="#" class="to-top" id="toTop">↑&lt;/a></code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="menu" data-name=".menu">
<h2 class="blocks-library__item-title">Меню</h2>
......@@ -1398,11 +1363,73 @@
<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;ul class="breadcrumbs"></code>
<code> &lt;li class="breadcrumbs__item">&lt;a href="" class="breadcrumbs__link">Главная&lt;/a>&lt;/li></code>
<code> &lt;li class="breadcrumbs__item">&lt;a href="" class="breadcrumbs__link">Каталог&lt;/a>&lt;/li></code>
<code> &lt;li class="breadcrumbs__item">&lt;a href="" class="breadcrumbs__link">Маркеры&lt;/a>&lt;/li></code>
<code>&lt;/ul></code>
<code>&lt;ul class="breadcrumbs"></code>
<code> &lt;li class="breadcrumbs__item">&lt;a href="" class="breadcrumbs__link">Главная&lt;/a>&lt;/li></code>
<code> &lt;li class="breadcrumbs__item">&lt;a href="" class="breadcrumbs__link">Каталог&lt;/a>&lt;/li></code>
<code> &lt;li class="breadcrumbs__item">&lt;a href="" class="breadcrumbs__link">Маркеры&lt;/a>&lt;/li></code>
<code>&lt;/ul></code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item blocks-library__item--menusep" id="progress" data-name=".progress">
<h2 class="blocks-library__item-title">Прогресс</h2>
<div class="progress">
<div class="progress__bar" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
<span class="progress__bartext">10%</span>
</div>
</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">111</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="is-mobile" data-name=".is-mobile">
<h2 class="blocks-library__item-title">Определение мобильного устройства</h2>
<p class="alert alert--warning">Зависимость от <a href="https://github.com/kaimallea/isMobile">isMobile</a>. Последний должен быть включен в сборку (есть по умолчанию) или подключен к странице иным образом.</p>
<p>JavaScript, добавляющий на <code>&lt;html></code> класс <code>is-mobile</code>, если страница открыта с мобильного устройства. Так же, добавляются модификаторы блока с указанием типа устройства и производителя.</p>
<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;html class="is-mobile is-mobile--android-phone is-mobile--android-device is-mobile--phone"></code>
<code> ...</code>
<code>&lt;/html></code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="to-top" data-name=".to-top">
<h2 class="blocks-library__item-title">Кнопка скролла вверх</h2>
<p>Кнопка появляется, если вертикальный скролл более 900 пикс.</p>
<p class="alert alert--warning">Зависит от <a href="https://jquery.com/">jQuery</a> (включен в сборку по умолчанию).</p>
<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;a href="#" class="to-top" id="toTop">↑&lt;/a></code>
</pre>
</div>
</div>
......@@ -1773,7 +1800,9 @@
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 classes = 'menu__item';
if (block.classList.contains('blocks-library__item--menusep')) { classes += ' menu__item--separator'; }
offCanvasMenu += '<li class="'+classes+'"><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;
......
src/blocks/field-range/field-range.scss
View file @ d865ac41
......@@ -2,7 +2,7 @@
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// Не пишите здесь другие селекторы.
$gray-lightest: hsl(0, 0%, 90%);
$gray-lightest: hsl(0, 0%, 90%) !default;
$border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.375em !default;
......
src/blocks/main-nav/main-nav.scss
View file @ d865ac41
......@@ -15,6 +15,8 @@ $menu-desktop-width: $screen-xl !default;
$toggler-part-height: 3px !default;
$toggler-part-bg-color: #000 !default;
$transition-time: 0.3s !default;
.main-nav {
$block-name: &;
......@@ -98,7 +100,7 @@ $toggler-part-bg-color: #000 !default;
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity 0.3s;
transition: opacity $transition-time;
#{$block-name}__item--show-child > &,
#{$block-name}__item:hover & {
......@@ -119,7 +121,7 @@ $toggler-part-bg-color: #000 !default;
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity 0.3s;
transition: opacity $transition-time;
#{$block-name}__item--show-child > &,
#{$block-name}__item--lvl-2:hover & {
......
src/blocks/progress/progress.html 0 → 100644
View file @ d865ac41
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/progress/progress.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="progress">
<div class="progress__bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span class="progress__bartext">80%</span>
</div>
</div>
src/blocks/progress/progress.scss 0 → 100644
View file @ d865ac41
// В этом файле должны быть стили только для БЭМ-блока progress, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
$gray-lightest: hsl(0, 0%, 90%) !default;
$border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.375em !default;
$border-radius: 3px !default;
$transition-time: 0.3s !default;
.progress {
margin-top: $line-height;
margin-bottom: $line-height;
border: 1px solid $border-color;
border-radius: $border-radius;
text-align: center;
&__bar {
background-color: $gray-lightest;
border-radius: $border-radius;
padding: 0.5em;
max-width: 100%;
transition: width $transition-time;
}
}
src/scss/variables.scss
View file @ d865ac41
// Базовые цвета https://colorscheme.ru/color-converter.html
/// Базовые цвета https://colorscheme.ru/color-converter.html
$black: hsl(0, 0%, 0%);
$gray-darkest: hsl(0, 0%, 10%);
......
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