Skip to content

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

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

parent a04f2b63
Show 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 @@ ...@@ -48,7 +48,8 @@
"breadcrumbs": [], "breadcrumbs": [],
"nouislider": [], "nouislider": [],
"off-canvas": [], "off-canvas": [],
"burger": [] "burger": [],
"progress": []
}, },
"addCssBefore": [ "addCssBefore": [
"./src/scss/variables.scss", "./src/scss/variables.scss",
......
src/blocks-demo.html
View file @ d865ac41
...@@ -14,6 +14,10 @@ ...@@ -14,6 +14,10 @@
max-width: 1200px; max-width: 1200px;
font-family: sans-serif; font-family: sans-serif;
} }
.off-canvas__aside {
padding-top: 1em;
padding-bottom: 1em;
}
</style> </style>
<script> <script>
document.addEventListener('DOMContentLoaded', function(){ document.addEventListener('DOMContentLoaded', function(){
...@@ -77,27 +81,7 @@ ...@@ -77,27 +81,7 @@
</div> </div>
</section> </section>
<section class="blocks-library__item" id="is-mobile" data-name=".is-mobile"> <section class="blocks-library__item blocks-library__item--menusep" id="text">
<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">
<h2 class="blocks-library__item-title" id="text-text">Текст, теги</h2> <h2 class="blocks-library__item-title" id="text-text">Текст, теги</h2>
...@@ -307,7 +291,7 @@ ...@@ -307,7 +291,7 @@
</section> </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> <h2 class="blocks-library__item-title">PNG-спрайт с <a href="https://github.com/Ensighten/spritesmith">spritesmith</a></h2>
...@@ -549,25 +533,6 @@ ...@@ -549,25 +533,6 @@
</section> </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"> <section class="blocks-library__item" id="menu" data-name=".menu">
<h2 class="blocks-library__item-title">Меню</h2> <h2 class="blocks-library__item-title">Меню</h2>
...@@ -1409,6 +1374,68 @@ ...@@ -1409,6 +1374,68 @@
</section> </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>
</section>
<section class="blocks-library__item" id="dropdown" data-name=".dropdown"> <section class="blocks-library__item" id="dropdown" data-name=".dropdown">
<h2 class="blocks-library__item-title">Выпадающий блок</h2> <h2 class="blocks-library__item-title">Выпадающий блок</h2>
...@@ -1773,7 +1800,9 @@ ...@@ -1773,7 +1800,9 @@
var demoBlocks = document.querySelectorAll('.blocks-library__item'); var demoBlocks = document.querySelectorAll('.blocks-library__item');
var offCanvasMenu = ''; var offCanvasMenu = '';
demoBlocks.forEach(function(block) { 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'); var offCanvasMenuContent = document.getElementById('off-canvas-menu');
offCanvasMenuContent.innerHTML = offCanvasMenu; offCanvasMenuContent.innerHTML = offCanvasMenu;
......
src/blocks/field-range/field-range.scss
View file @ d865ac41
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
// модификаторов, псевдоселекторов, псевдоэлементов, $media-условий... // модификаторов, псевдоселекторов, псевдоэлементов, $media-условий...
// Не пишите здесь другие селекторы. // Не пишите здесь другие селекторы.
$gray-lightest: hsl(0, 0%, 90%); $gray-lightest: hsl(0, 0%, 90%) !default;
$border-color: hsl(0, 0%, 60%) !default; $border-color: hsl(0, 0%, 60%) !default;
$line-height: 1.375em !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; ...@@ -15,6 +15,8 @@ $menu-desktop-width: $screen-xl !default;
$toggler-part-height: 3px !default; $toggler-part-height: 3px !default;
$toggler-part-bg-color: #000 !default; $toggler-part-bg-color: #000 !default;
$transition-time: 0.3s !default;
.main-nav { .main-nav {
$block-name: &; $block-name: &;
...@@ -98,7 +100,7 @@ $toggler-part-bg-color: #000 !default; ...@@ -98,7 +100,7 @@ $toggler-part-bg-color: #000 !default;
opacity: 0; opacity: 0;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
transition: opacity 0.3s; transition: opacity $transition-time;
#{$block-name}__item--show-child > &, #{$block-name}__item--show-child > &,
#{$block-name}__item:hover & { #{$block-name}__item:hover & {
...@@ -119,7 +121,7 @@ $toggler-part-bg-color: #000 !default; ...@@ -119,7 +121,7 @@ $toggler-part-bg-color: #000 !default;
opacity: 0; opacity: 0;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
transition: opacity 0.3s; transition: opacity $transition-time;
#{$block-name}__item--show-child > &, #{$block-name}__item--show-child > &,
#{$block-name}__item--lvl-2:hover & { #{$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%); $black: hsl(0, 0%, 0%);
$gray-darkest: hsl(0, 0%, 10%); $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