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 @@ ...@@ -5,84 +5,6 @@
.main-nav { .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 { &__list {
padding: 0; padding: 0;
list-style: none; list-style: none;
......
src/blocks/navbar/navbar.less
View file @ d92a6e2d
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
&__inner { &__inner {
.container(); .container();
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
} }
...@@ -21,8 +21,104 @@ ...@@ -21,8 +21,104 @@
&__right { &__right {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; 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 { &__form {
......
src/blocks_library.html
View file @ d92a6e2d
...@@ -28,63 +28,65 @@ ...@@ -28,63 +28,65 @@
</a> </a>
</div> </div>
<div class="navbar__right"> <div class="navbar__right">
<nav class="main-nav"> <input class="navbar__toggler-checkbox" type="checkbox" id="navbar-toggler" style="display:none!important;">
<input class="main-nav__toggler-checkbox" type="checkbox" id="main-menu-show-toggler" style="display:none!important;"> <label class="navbar__toggler" for="navbar-toggler">
<label class="main-nav__toggler" for="main-menu-show-toggler"> <span class="navbar__toggler-icon"></span>
<span class="main-nav__toggler-icon"></span> </label>
</label> <div class="navbar__content">
<ul class="main-nav__list"> <nav class="main-nav">
<li class="main-nav__item"> <ul class="main-nav__list">
<a href="" class="main-nav__link"> <li class="main-nav__item">
<span class="main-nav__link-text">Библиотека</span> <a href="" class="main-nav__link">
</a> <span class="main-nav__link-text">Библиотека</span>
<ul class="main-nav__list main-nav__list--level-2"> </a>
<li class="main-nav__item"> <ul class="main-nav__list main-nav__list--level-2">
<a href="" class="main-nav__link"> <li class="main-nav__item">
<span class="main-nav__link-text">Типографика</span> <a href="" class="main-nav__link">
</a> <span class="main-nav__link-text">Типографика</span>
</li> </a>
<li class="main-nav__item"> </li>
<a href="" class="main-nav__link"> <li class="main-nav__item">
<span class="main-nav__link-text">Горизонтальный ассоциативный список</span> <a href="" class="main-nav__link">
</a> <span class="main-nav__link-text">Горизонтальный ассоциативный список</span>
</li> </a>
<li class="main-nav__item"> </li>
<a href="" class="main-nav__link"> <li class="main-nav__item">
<span class="main-nav__link-text">Блочные цитаты по правому краю</span> <a href="" class="main-nav__link">
</a> <span class="main-nav__link-text">Блочные цитаты по правому краю</span>
</li> </a>
<li class="main-nav__item"> </li>
<a href="" class="main-nav__link"> <li class="main-nav__item">
<span class="main-nav__link-text">Нумерованные списки с особыми маркерами</span> <a href="" class="main-nav__link">
</a> <span class="main-nav__link-text">Нумерованные списки с особыми маркерами</span>
</li> </a>
</ul> </li>
</li> </ul>
<li class="main-nav__item"> </li>
<a href="" class="main-nav__link"> <li class="main-nav__item">
<span class="main-nav__link-text">Репозиторий</span> <a href="" class="main-nav__link">
</a> <span class="main-nav__link-text">Репозиторий</span>
</li> </a>
<li class="main-nav__item"> </li>
<a href="" class="main-nav__link"> <li class="main-nav__item">
<span class="main-nav__link-text">Контакты</span> <a href="" class="main-nav__link">
</a> <span class="main-nav__link-text">Контакты</span>
</li> </a>
</ul> </li>
</nav> </ul>
<div class="navbar__message">Текст в шапке</div> </nav>
<div class="navbar__btns"> <div class="navbar__message">Текст в шапке</div>
<a href="" class="btn">Кнопка</a> <div class="navbar__btns">
</div> <a href="" class="btn">Кнопка</a>
<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> </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> </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