Included in:
Not included in any file!
Depends from:
breakpoint('desktop')
breakpoint('laptop')
breakpoint('tablet')
expandMenu()
component
Topbar
Topbar Module description
<!-- The data-theme is for example purposes. Don't use in it modules -->
<<<<<<< HEAD
<section class="module topbar topbar--expand-menu-none" data-theme="light">
<div class="wrapper topbar__wrapper py-10">
<div class="topbar__body">
=======
<section class="topbar topbar--expand-tablet is-sticky" data-theme="light">
<div class="wrapper topbar__wrapper padding-y-xs is-width-large">
>>>>>>> bc70f7bfeab356cab1666647945a8de56763614c
<div class="topbar__branding">
<div class="branding">
<a href="http://localhost:8888/_portfolio/" class="branding__link">
<figure class="branding__logo">
<img src="https://www.inboundcycle.com/hubfs/theme-master/img/Logo.svg" alt="logo">
</figure>
<span class="branding__slogan">
The Blog
</span>
</a>
</div><!-- /.branding -->
</div><!-- .topbar__branding -->
<div class="topbar__navigation">
<div class="toggle">
<input class="toggle__checkbox" id="topbar-ID_1" type="checkbox">
<label class="toggle__button" id="topbar-toggle-button" for="topbar-ID_1">
<span class="toggle__open">Menu</span>
<span class="toggle__close">Close</span>
</label>
<div class="toggle__content" id="topbar-toggle-content">
<nav class="navigation">
<ul class="navigation__menu">
<li class="navigation__item">
<a href="http://localhost:8888/_portfolio/">Item</a>
</li>
<li class="navigation__item has-children">
<a href="http://localhost:8888/_portfolio/">Item with children</a>
<ul class="sub-menu">
<li class="sub-menu__item">
<a href="#">Child</a>
</li>
<li class="sub-menu__item">
<a href="#">Child</a>
</li>
</ul>
</li>
<li class="navigation__item">
<a href="http://localhost:8888/_portfolio/">Item</a>
</li>
<li class="navigation__item">
<a href="http://localhost:8888/_portfolio/">Item</a>
</li>
<li class="navigation__item">
<a href="http://localhost:8888/_portfolio/">Item</a>
</li>
</ul>
</nav><!-- .module.navigation -->
</div><!--.toggle__content-->
</div><!-- /.toggle -->
</div><!-- /.topbar__navigation -->
<div class="topbar__search">
<div class="toggle">
<input class="toggle__checkbox" id="toggle-ID_2" type="checkbox">
<label class="toggle__button" for="toggle-ID_2">
<span class="toggle__open">Search</span>
<span class="toggle__close">Close</span>
</label>
<div class="toggle__content" id="toggle-search-content">
<form action="#" class="searh-form" role="search">
<div class="search-form__control control has-icon-left">
<div class="prepend-icon">
<span class="icc-icon material-symbols-sharp">search</span>
</div>
<input type="search" class="search-form__input input" placeholder="Buscar en el sitio..." title="Buscar">
</div>
</form><!-- /.searh-form -->
</div><!--.toggle__content-->
</div><!-- /.toggle -->
</div><!--.topbar__search-->
</div><!--.topbar__body-->
</div><!--.wrapper-->
</section><!--.topbar-->
<<<<<<< HEAD
=======
50
Total declarations
0
Important
declarations
declarations
0
Vendor
prefixes
prefixes
0
Floats
declared
declared
8
width
5
display
5
height
5
position
4
align-items
3
top
2
background
2
gap
2
justify-content
Component structure
use '../utilities/mixins/breakpoints.scss' as * {...}
use '../components/navigation.scss' as * {...}
mixin expandMenu {...}
.topbar {...}
&__navigation {...}
.toggle {...}
&__button {...}
&__content,
&__checkbox:checked ~ .toggle__content {...}
&__search {...}
.toggle {...}
&__content {...}
&__checkbox {...}
&:checked {...}
& ~ .toggle__content {...}
.search-form {...}
&__input {...}
.topbar {...}
&__wrapper {...}
&__branding {...}
a {...}
.branding {...}
&__logo {...}
.toggle {...}
&__checkbox {...}
&:checked {...}
& ~ .toggle__content {...}
&--expand-always {...}
include expandMenu();
include breakpoint('tablet');
.topbar {...}
&--expand-tablet {...}
include expandMenu();
include breakpoint('laptop');
.topbar {...}
&--expand-laptop {...}
include expandMenu();
include breakpoint('desktop');
.topbar {...}
&--expand-desktop {...}
include expandMenu();