Produto
PRODUTO
Listas
O componente de lista agrupa conteúdos relacionados em ordenação vertical, eventualmente estabelecendo uma relação hierárquica entre eles.
Anatomia
Exemplos de uso
Lista de seleção
Lista numerada
Estados de interação
Normal
Hover
Pressed
Disable
Código
HTML 
Exibir código
Copiar código
Exibir código
<ul class="list default">
<li><a href="#">
Item 1
</a>
</li>
<li><a href="#">
Item 2
</a>
</li>
<li><a href="#">
Item 3
</a>
</li>
</ul>
<ul class="list selection">
<li><label class="checkbox"><span class="text">
Item 1
</span><input type="checkbox"><span class="checkmark"></span></label>
</li>
<li><label class="checkbox"><span class="text">
Item 1
</span><input type="checkbox" checked="checked"><span class="checkmark"></span></label>
</li>
<li><label class="checkbox"><span class="text">
Item 1
</span><input type="checkbox"><span class="checkmark"></span></label>
</li>
</ul>
<ul class="list numbered">
<li><a href="#">
INSTITUIÇÃO
<span>Descrição da questão.</span></a>
</li>
<li><a href="#">
INSTITUIÇÃO
<span>Descrição da questão.</span></a>
</li>
<li><a href="#">
INSTITUIÇÃO
<span>Descrição da questão.</span></a>
</li>
<li class="active"><a href="#">
INSTITUIÇÃO
<span>Descrição da questão.</span></a>
</li>
</ul>
SASS Exibir código
Copiar código
Exibir código
.list{
list-style: none;
max-width: 100%;
&.default{
padding-left: 40px;
li{
a{
display: block;
font-family: Lato;
font-size: 1em;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 24px;
letter-spacing: normal;
color: #1e2a54;
text-decoration: none!important;
&:hover,
&.hovered{
color: #3153f5;
}
&:focus,
&.focused{
color: #0a51fb;
}
&.disabled{
pointer-events: none;
color: #9b9b9b!important;
}
}
&:not(:last-child){
margin-bottom: 24px;
}
}
}
&.iconed{
margin: 0;
li{
position: relative;
a{
display: block;
font-family: Lato;
font-size: 1em;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 24px;
letter-spacing: normal;
color: #1e2a54;
text-decoration: none!important;
.item-icon{
display: inline-block;
vertical-align: middle;
margin-right: 11px;
}
.time{
float: right;
margin-right: 20px;
font-family: Lato;
font-size: 0.75em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 30px;;
letter-spacing: normal;
color: #9b9b9b;
}
&:hover,
&.hovered{
color: #3153f5;
.item-icon{
#star{
fill: #3153f5;
}
}
}
&:focus,
&.focused{
color: #0a51fb;
.item-icon{
#star{
fill: #0a51fb;
}
}
}
&.disabled{
pointer-events: none;
color: #9b9b9b!important;
.item-icon{
#star{
fill: #ebebeb!important;
}
}
}
}
&:not(:last-child){
margin-bottom: 24px;
}
&.active{
a:after{
content: "";
width: 24px;
height: 24px;
background-image: url(/img/check-white.png);
background-position: 0;
background-size: 24px;
border-radius: 15px;
display: block;
background-color: #3153f5;
position: absolute;
right: 20px;
top: 4px;
}
}
}
}
&.selection{
.checkbox{
display: block;
position: relative;
padding-left: 35px;
cursor: pointer;
font-size: 1em;
user-select: none;
min-height: 25px;
margin: 13px 0;
box-sizing: border-box;
width: 100%;
transition: .4s;
.text{
font-family: Lato;
font-size: 1em;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #1e2a54;
transition: .4s;
&:hover{
color: #1b68ff;
}
}
input {
position: absolute;
opacity: 0;
cursor: pointer;
&:checked + .text {
color: #3153f5;
}
&:checked ~ .checkmark {
border-color: #3153f5;
&:after{
display: block;
}
}
}
.checkmark {
position: absolute;
top: 0;
left: initial;
right: 30px;
height: 22px;
width: 22px;
background-color: #fff;
border: 1px solid #7f7f7f;
border-radius: 4px;
transition: .4s;
&:after {
content: "";
position: absolute;
display: none;
background-image: url(/img/input-checkbox-icon.svg);
background-size: 16px;
background-repeat: no-repeat;
width: 15px;
height: 11px;
top: 5px;
left: 4px;
}
}
&:hover input ~ .checkmark {
border-color: #1b68ff;
}
}
}
&.numbered{
list-style: none;
padding: 0;
margin: 0;
li{
position: relative;
counter-increment: esum;
padding: 0 10px 0 30px;
&:before {
content: counter(esum) ".";
position: absolute;
top: 30px;
display: block;
}
a{
font-family: Lato;
font-size: 1em;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 24px;
letter-spacing: normal;
color: #1e2a54;
text-decoration: none;
padding: 20px 20px 20px 50px;
display: block;
&:hover{
text-decoration: none;
}
span{
display: block;
font-family: Lato;
font-size: 1em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #1e2a54;
margin-top: 5px;
}
}
&:not(:last-child){
border-bottom: 1px solid #ebebeb;
}
&.active{
color: #9b9b9b;
a,
span{
color: #9b9b9b;
}
a:after{
content: "";
width: 24px;
height: 24px;
background-image: url(/img/check-white.png);
background-position: 0;
background-size: 24px;
border-radius: 15px;
display: block;
background-color: #9b9b9b;
position: absolute;
right: 20px;
top: 40%;
}
}
}
}
}