Skip to content

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

Дополнение для Навбара

parent 67a1052b
Hide whitespace changes
Inline Side-by-side
Showing with 156 additions and 136 deletions
src/blocks/main-nav/main-nav.less
View file @ d92a6e2d
......@@ -5,84 +5,6 @@
.main-nav {
&__toggler {
position: relative;
z-index: 1;
top: 0;
right: 0;
display: flex;
align-items: center;
width: 4rem;
height: 4rem;
line-height: 4rem;
padding: 0.5rem;
user-select: none;
cursor: pointer;
color: @text-color;
background-color: @gray-lighter;
border: 1px solid @gray-light;
border-radius: @border-radius;
@media (min-width: @screen-lg) {
display: none;
}
}
&__toggler-icon {
display: inline-block;
vertical-align: bottom;
width: 100%;
height: 0.3rem;
background: currentColor;
border-radius: 0.2rem;
position: relative;
transition: background 0.3s 0.3s;
&:before,
&:after {
width: 100%;
height: 0.3rem;
background: currentColor;
border-radius: 0.2rem;
position: absolute;
left: 0;
content: '';
transform-origin: 50% 50%;
transition: top 0.3s 0.3s, transform 0.3s;
}
&:before {
top: 1rem;
}
&:after {
top: -1rem;
}
}
&__toggler-checkbox {
&:checked {
& ~ .main-nav__toggler .main-nav__toggler-icon {
transition: background .3s 0;
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);
}
}
}
}
&__list {
padding: 0;
list-style: none;
......
src/blocks/navbar/navbar.less
View file @ d92a6e2d
......@@ -10,7 +10,7 @@
&__inner {
.container();
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-between;
}
......@@ -21,8 +21,104 @@
&__right {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
justify-content: flex-end;
@media (min-width: @screen-lg) {
justify-content: flex-start;
}
}
&__toggler {
position: relative;
z-index: 1;
top: 0;
right: 0;
display: flex;
align-items: center;
width: 4rem;
height: 4rem;
line-height: 4rem;
padding: 0.5rem;
user-select: none;
cursor: pointer;
color: @text-color;
background-color: @gray-lighter;
border: 1px solid @gray-light;
border-radius: @border-radius;
@media (min-width: @screen-lg) {
display: none;
}
}
&__toggler-icon {
display: inline-block;
vertical-align: bottom;
width: 100%;
height: 0.3rem;
background: currentColor;
border-radius: 0.2rem;
position: relative;
transition: background 0.3s 0.3s;
&:before,
&:after {
width: 100%;
height: 0.3rem;
background: currentColor;
border-radius: 0.2rem;
position: absolute;
left: 0;
content: '';
transform-origin: 50% 50%;
transition: top 0.3s 0.3s, transform 0.3s;
}
&:before {
top: 1rem;
}
&:after {
top: -1rem;
}
}
&__toggler-checkbox {
&:checked {
& ~ .navbar__toggler .navbar__toggler-icon {
transition: background .3s 0;
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);
}
}
& ~ .navbar__content {
display: block;
}
}
}
&__content {
display: none;
width: 100%;
@media (min-width: @screen-lg) {
display: block;
}
}
&__form {
......
src/blocks_library.html
View file @ d92a6e2d
......@@ -28,63 +28,65 @@
</a>
</div>
<div class="navbar__right">
<nav class="main-nav">
<input class="main-nav__toggler-checkbox" type="checkbox" id="main-menu-show-toggler" style="display:none!important;">
<label class="main-nav__toggler" for="main-menu-show-toggler">
<span class="main-nav__toggler-icon"></span>
</label>
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Библиотека</span>
</a>
<ul class="main-nav__list main-nav__list--level-2">
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Типографика</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Горизонтальный ассоциативный список</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Блочные цитаты по правому краю</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Нумерованные списки с особыми маркерами</span>
</a>
</li>
</ul>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Репозиторий</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Контакты</span>
</a>
</li>
</ul>
</nav>
<div class="navbar__message">Текст в шапке</div>
<div class="navbar__btns">
<a href="" class="btn">Кнопка</a>
</div>
<form class="navbar__form">
<div class="fields-group">
<label class="field-text fields-group__item">
<input class="field-text__input" type="search" placeholder="input[type=search]">
</label>
<button class="btn fields-group__item fields-group__item--addon">Найти</button>
<input class="navbar__toggler-checkbox" type="checkbox" id="navbar-toggler" style="display:none!important;">
<label class="navbar__toggler" for="navbar-toggler">
<span class="navbar__toggler-icon"></span>
</label>
<div class="navbar__content">
<nav class="main-nav">
<ul class="main-nav__list">
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Библиотека</span>
</a>
<ul class="main-nav__list main-nav__list--level-2">
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Типографика</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Горизонтальный ассоциативный список</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Блочные цитаты по правому краю</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Нумерованные списки с особыми маркерами</span>
</a>
</li>
</ul>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Репозиторий</span>
</a>
</li>
<li class="main-nav__item">
<a href="" class="main-nav__link">
<span class="main-nav__link-text">Контакты</span>
</a>
</li>
</ul>
</nav>
<div class="navbar__message">Текст в шапке</div>
<div class="navbar__btns">
<a href="" class="btn">Кнопка</a>
</div>
</form>
<form class="navbar__form">
<div class="fields-group">
<label class="field-text fields-group__item">
<input class="field-text__input" type="search" placeholder="input[type=search]">
</label>
<button class="btn fields-group__item fields-group__item--addon">Найти</button>
</div>
</form>
</div>
</div>
</div>
</div>
......
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