Commit f521e833 authored by Diego Islas Ocampo's avatar Diego Islas Ocampo

Finish navigation system

parent dfdf0bd9
This diff is collapsed.
This diff is collapsed.
......@@ -9,6 +9,7 @@
<meta charset="UTF-8">
<meta name="viewport" container="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="./../dist/kayros.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<style>
.hero {
......@@ -19,14 +20,15 @@
</head>
<body>
<nav class="card card--depth--2 nav nav--fixed nav--side nav-side--tablet nav--side-desktop nav--side--desktop-large">
<nav class="card card--depth--2 nav nav--side nav--side--phablet nav--side--tablet nav--side--desktop nav--side--desktop-large nav--fixed">
<header class="nav__header">
<img src="https://aegisframework.com/img/icon.svg" class="nav__header__logo">
<h1 class="nav__header__title">Kayros Side Navigation</h1>
</header>
<ul class="nav__content-list">
<li class="nav__content-list__item"><img src="https://aegisframework.com/img/icon.svg"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<i class="nav__menu-icon fas fa-bars"></i>
<ul class="nav__content-list nav__content-list--active .nav__content-list--full">
<li class="nav__content-list__item"><a href="#"><img src="https://aegisframework.com/img/icon.svg" class="nav__content-list__item__icon"> Some Item</a></li>
<li class="nav__content-list__item"><a href="#"><i class="nav__content-list__item__icon fas fa-bell "></i>Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
......@@ -45,8 +47,9 @@
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
</ul>
</nav>
<div class="wrapper offset-sn-m offset-sn-l offset-sn-xl padded-1">
<div class="wrapper--side-navigation--tablet wrapper--side-navigation--phablet wrapper--side-navigation--desktop wrapper--side-navigation--desktop-large padded">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non euismod turpis. Aenean laoreet non ipsum ac aliquet. Fusce vehicula et tortor sed porta. Vestibulum metus ligula, pharetra et sem in, iaculis semper ex. Nullam accumsan porta augue. Maecenas leo lorem, feugiat ut pellentesque nec, mattis molestie ligula. Nunc metus lacus, fermentum non congue ut, dapibus pretium quam. Sed eu ultrices enim. Cras auctor turpis magna, ut sodales ex lacinia at. Donec mattis dapibus aliquet. Donec eget dui laoreet, congue diam sit amet, sollicitudin orci. Phasellus quis lobortis tortor. Sed sollicitudin, felis at rhoncus porta, sem augue hendrerit orci, et finibus nulla nulla nec ligula.
......
......@@ -20,12 +20,12 @@
</head>
<body>
<nav class="card card--depth--2 nav nav--fixed nav--top">
<nav class="card card--depth--2 nav nav--fixed nav--top nav--top--phablet nav--top--tablet nav--top--desktop">
<header class="nav__header nav--top__header">
<img src="https://aegisframework.com/img/icon.svg" class="nav__header__logo nav--top__header__logo">
<h1 class="nav__header__title nav--top__header__title">Kayros Side Navigation</h1>
</header>
<ul class="nav__content-list">
<ul class="nav__content-list nav__content-list--full">
<li class="nav__content-list__item"><a href="#"><img src="https://aegisframework.com/img/icon.svg" class="nav__content-list__item__icon"> Some Item</a></li>
<li class="nav__content-list__item"><a href="#"><i class="nav__content-list__item__icon fas fa-bell "></i>Some Item</a></li>
<li class="nav__content-list__item"><a href="#">Some Item</a></li>
......@@ -48,7 +48,7 @@
</ul>
<i class="nav__menu-icon fas fa-bars"></i>
</nav>
<div class="wrapper wrapper--nav--top padded">
<div class="wrapper--top-navigation padded">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non euismod turpis. Aenean laoreet non ipsum ac aliquet. Fusce vehicula et tortor sed porta. Vestibulum metus ligula, pharetra et sem in, iaculis semper ex. Nullam accumsan porta augue. Maecenas leo lorem, feugiat ut pellentesque nec, mattis molestie ligula. Nunc metus lacus, fermentum non congue ut, dapibus pretium quam. Sed eu ultrices enim. Cras auctor turpis magna, ut sodales ex lacinia at. Donec mattis dapibus aliquet. Donec eget dui laoreet, congue diam sit amet, sollicitudin orci. Phasellus quis lobortis tortor. Sed sollicitudin, felis at rhoncus porta, sem augue hendrerit orci, et finibus nulla nulla nec ligula.
......
......@@ -57,8 +57,7 @@ select {
border-radius: 3px;
}
button:hover,
a.button:hover {
button:hover {
background-color: #e8e8e8;
}
......
This diff is collapsed.
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