Skip to content

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

Добавил навгацию по библиотеке

parent c6555458
Show whitespace changes
Inline Side-by-side
Showing with 188 additions and 12 deletions
src/blocks/main-nav/main-nav.less
View file @ 67c01502
......@@ -79,6 +79,19 @@
display: block;
position: relative;
&--divider {
margin-top: 2rem;
&:before {
content: '';
position: absolute;
top: -1rem;
left: 0;
right: 0;
border-top: 1px solid @gray-light;
}
}
// Сокрытие и показ по наведению
@media (min-width: @screen-lg) {
......
src/blocks_library.html
View file @ 67c01502
......@@ -36,19 +36,14 @@
<a class="main-nav__link">
<span class="main-nav__link-text">Библиотека</span>
</a>
<div class="main-nav__nested-lvl">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="#text" class="main-nav__link">
<span class="main-nav__link-text">Типографика</span>
</a>
<div class="main-nav__nested-lvl">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="#text-text" class="main-nav__link">
<span class="main-nav__link-text">Текст, теги</span>
</a>
</li>
<div class="main-nav__nested-lvl">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="#text-headers" class="main-nav__link">
<span class="main-nav__link-text">Заголовки и параграфы</span>
......@@ -89,17 +84,185 @@
<span class="main-nav__link-text">Форматированный текст</span>
</a>
</li>
<li class="main-nav__item main-nav__item--divider">
<a href="#dl-horizontal" class="main-nav__link">
<span class="main-nav__link-text">Горизонтальный ассоциативный список</span>
</a>
</li>
<li class="main-nav__item">
<a href="#blockquote-right" class="main-nav__link">
<span class="main-nav__link-text">Блочные цитаты по правому краю</span>
</a>
</li>
<li class="main-nav__item">
<a href="#list-nums" class="main-nav__link">
<span class="main-nav__link-text">Нумерованные списки с особыми маркерами</span>
</a>
</li>
<li class="main-nav__item">
<a href="#list-bullet" class="main-nav__link">
<span class="main-nav__link-text">Маркированные списки с особыми маркерами</span>
</a>
</li>
</ul>
</div>
</li>
<li class="main-nav__item">
<a href="#thumb" class="main-nav__link">
<span class="main-nav__link-text">Изображения с рамкой</span>
</a>
</li>
<li class="main-nav__item">
<a href="#table" class="main-nav__link">
<span class="main-nav__link-text">Таблицы</span>
</a>
<div class="main-nav__nested-lvl">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="#table-block" class="main-nav__link">
<span class="main-nav__link-text">Таблица как БЭМ-блок</span>
</a>
</li>
<li class="main-nav__item">
<a href="#table-responsive" class="main-nav__link">
<span class="main-nav__link-text">Адаптивные таблицы с повторяющимися названиями ячеек</span>
</a>
</li>
<li class="main-nav__item">
<a href="#table-responsive-scroll" class="main-nav__link">
<span class="main-nav__link-text">Адаптивные таблицы c горизонтальной прокруткой</span>
</a>
</li>
<li class="main-nav__item">
<a href="#table-responsive-rotate" class="main-nav__link">
<span class="main-nav__link-text">Адаптивные таблицы cо сменой строк на колонки</span>
</a>
</li>
</ul>
</div>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Репозиторий</span>
<a href="#forms" class="main-nav__link">
<span class="main-nav__link-text">Формы</span>
</a>
<div class="main-nav__nested-lvl">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="#forms" class="main-nav__link">
<span class="main-nav__link-text">Формы по умолчанию</span>
</a>
</li>
<li class="main-nav__item">
<a href="#field-text" class="main-nav__link">
<span class="main-nav__link-text">Текстовые поля</span>
</a>
</li>
<li class="main-nav__item">
<a href="#field-checkbox" class="main-nav__link">
<span class="main-nav__link-text">Флажки (чекбоксы)</span>
</a>
</li>
<li class="main-nav__item">
<a href="#field-radio" class="main-nav__link">
<span class="main-nav__link-text">Радиокнопки</span>
</a>
</li>
<li class="main-nav__item">
<a href="#field-toggler" class="main-nav__link">
<span class="main-nav__link-text">Переключатель</span>
</a>
</li>
<li class="main-nav__item">
<a href="#field-select" class="main-nav__link">
<span class="main-nav__link-text">Выпадающий список</span>
</a>
</li>
<li class="main-nav__item">
<a href="#field-range" class="main-nav__link">
<span class="main-nav__link-text">Диапазон</span>
</a>
</li>
<li class="main-nav__item">
<a href="#field-file" class="main-nav__link">
<span class="main-nav__link-text">Выбор файлов</span>
</a>
</li>
<li class="main-nav__item">
<a href="#field-actions" class="main-nav__link">
<span class="main-nav__link-text">Блок кнопок формы</span>
</a>
</li>
<li class="main-nav__item main-nav__item--divider">
<a href="#form" class="main-nav__link">
<span class="main-nav__link-text">Форма как БЭМ-блок</span>
</a>
</li>
</ul>
</div>
</li>
<li class="main-nav__item">
<a href="#btn" class="main-nav__link">
<span class="main-nav__link-text">Кнопки</span>
</a>
</li>
<li class="main-nav__item">
<a href="#form-mariage" class="main-nav__link">
<span class="main-nav__link-text">Группы текстовых полей</span>
</a>
</li>
<li class="main-nav__item">
<a href="#btn-group" class="main-nav__link">
<span class="main-nav__link-text">Группа кнопок</span>
</a>
</li>
<li class="main-nav__item">
<a href="#dropdown" class="main-nav__link">
<span class="main-nav__link-text">Выпадающие элементы</span>
</a>
</li>
<li class="main-nav__item">
<a href="#grid" class="main-nav__link">
<span class="main-nav__link-text">Модульная сетка на flexbox</span>
</a>
</li>
<li class="main-nav__item">
<a href="#responsive-mixins" class="main-nav__link">
<span class="main-nav__link-text">Примеси адаптивности</span>
</a>
</li>
<li class="main-nav__item">
<a href="#step-list" class="main-nav__link">
<span class="main-nav__link-text">Пошаговый список</span>
</a>
</li>
<li class="main-nav__item">
<a href="#label" class="main-nav__link">
<span class="main-nav__link-text">Метки</span>
</a>
</li>
<li class="main-nav__item">
<a href="#alert" class="main-nav__link">
<span class="main-nav__link-text">Сообщения</span>
</a>
</li>
<li class="main-nav__item">
<a href="#alert-area" class="main-nav__link">
<span class="main-nav__link-text">Область показа уведомлений</span>
</a>
</li>
<li class="main-nav__item">
<a href="#loader" class="main-nav__link">
<span class="main-nav__link-text">Загрузчик</span>
</a>
</li>
<li class="main-nav__item">
<a href="#code" class="main-nav__link">
<span class="main-nav__link-text">Листинг кода</span>
</a>
</li>
</ul>
</div>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Контакты</span>
......
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