pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add styles to handle multiple number of items

Browse Source
This commit is contained in:
Luis Cielak 2018-07-19 16:37:34 -04:00
parent ed13cac995
commit 157561076c
3 changed files with 46 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
scss/sections/_progress_menu.scss
View File

@ -1,7 +1,5 @@
.progress-menu { .progress-menu {
display: table; display: block;
margin: 0 auto;
padding: ($gap * 2) 0;
ul { ul {
list-style: none; list-style: none;
@ -9,11 +7,29 @@
padding: 0; padding: 0;
} }
&--three {
.progress-menu__item {
width: 32%;
}
}
&--four {
.progress-menu__item {
width: 24%;
}
}
&--five {
.progress-menu__item {
width: 19%;
}
}
&__item { &__item {
float: left; display: inline-block;
font-weight: $font-bold; font-weight: $font-bold;
width: 19%;
position: relative; position: relative;
vertical-align: top;
a { a {
display: block; display: block;

2
templates/requests/menu.html.to
View File

@ -1,4 +1,4 @@
<div class="progress-menu"> <div class="progress-menu progress-menu--five">
<ul> <ul>
{% for i,s in enumerate(screens) %} {% for i,s in enumerate(screens) %}
<li class="progress-menu__item"> <li class="progress-menu__item">

28
templates/styleguide.html.to
View File

@ -27,14 +27,34 @@
<div class='col col--grow'> <div class='col col--grow'>
<div class="progress-menu"> <div class="progress-menu progress-menu--three">
<ul> <ul>
<li class="progress-menu__item progress-menu__item--complete"><a href="#">Details of Use</a></li> <li class="progress-menu__item progress-menu__item--complete"><a href="#">Step One</a></li>
<li class="progress-menu__item progress-menu__item--active"><a href="#">Organization Info</a></li> <li class="progress-menu__item progress-menu__item--active"><a href="#">Step Two</a></li>
<li class="progress-menu__item progress-menu__item--incomplete"><a href="#">Primary POC</a></li> <li class="progress-menu__item progress-menu__item--incomplete"><a href="#">Step Three</a></li>
</ul> </ul>
</div> </div>
<div class="progress-menu progress-menu--four">
<ul>
<li class="progress-menu__item progress-menu__item--complete"><a href="#">Step One</a></li>
<li class="progress-menu__item progress-menu__item--active"><a href="#">Step Two</a></li>
<li class="progress-menu__item progress-menu__item--incomplete"><a href="#">Step Three</a></li>
<li class="progress-menu__item progress-menu__item--incomplete"><a href="#">Step Four</a></li>
</ul>
</div>
<div class="progress-menu progress-menu--five">
<ul>
<li class="progress-menu__item progress-menu__item--complete"><a href="#">Step One</a></li>
<li class="progress-menu__item progress-menu__item--active"><a href="#">Step Two</a></li>
<li class="progress-menu__item progress-menu__item--incomplete"><a href="#">Step Three</a></li>
<li class="progress-menu__item progress-menu__item--incomplete"><a href="#">Step Four</a></li>
<li class="progress-menu__item progress-menu__item--incomplete"><a href="#">Step Five</a></li>
</ul>
</div>
<div class='panel'> <div class='panel'>
<div class='panel__content'> <div class='panel__content'>
<em>This is a panel content</em> <em>This is a panel content</em>